0

I have a position:fixed div that serves as a container for a top menu. I want the following div, which is the container for the rest of the contents, to be placed exactly after the fixed div, to avoid content being hidden under the top div, but also avoid some sort of "blank space" between them.

The basic workaround this is setting a fixed "margin-top" value, but i was wondering if it's possible to set the contents container "margin-top" value to the height of the fixed top menu div using CSS, or is it preferable to do it with JavaScript?

Here's the basic layout example:

<div id="divTopFixed" style="width: 100%; position: fixed; top: 0px;">Some DIVs<br>That create variable height</div>
<div style="margin-top: 40px; width:100%;">CONTENTS<br>...</div>

And a JSFiddle: http://jsfiddle.net/zzcbajtz/

Dillinger
  • 341
  • 3
  • 16
  • 4
    Please include a code sample of what you have, and also make it clear on what you want to achieve. Right now, this question is unclear. – Madara's Ghost Aug 30 '15 at 13:01
  • From your question I understand that the div's (with the `fixed` position) height are not permanently? – Mosh Feu Aug 30 '15 at 13:07
  • Edited my post to include better code. Don't need to downvote it.. It's only one fixed container div on top with variable height – Dillinger Aug 30 '15 at 13:12

1 Answers1

1

Setting margin-top to a fixed value is usually the right way to go about this.

If you're not sure about the height of the fixed top menu or it changes dynamically based on contents, you can use JavaScript/DOM events to adapt the margin value dynamically (e.g. in case the menu changes height when you resize the window, you could watch for the resize event and adjust the margin value).

I've updated the JSFiddle to show an example of how to tap into the resize event and set the margin by querying the offsetHeight of the fixed element: http://jsfiddle.net/zzcbajtz/2/

window.addEventListener('resize', (function resize(){
  document.getElementById('the_div').style.marginTop =
    document.getElementById('divTopFixed').offsetHeight + 'px';
  return resize;
})());

This code fires when the document is loaded and then again whenever the window is resized.

CSS can't calculate complex layouts like this for you, unfortunately. There's some better support for layouts coming in the future (but I think even that doesn't solve the problem you're experiencing here).

thomasfuchs
  • 5,386
  • 2
  • 18
  • 38
  • Thanks. I edited my question and added a JSFiddle. So or i stay with margin-top in a static way, or go with JavaScript to get a dynamic way? – Dillinger Aug 30 '15 at 13:16
  • JavaScript. I've updated your JSFiddle with a simple example. http://jsfiddle.net/zzcbajtz/2/ – thomasfuchs Aug 30 '15 at 15:17
  • Works fine for me on Firefox 40.0.3. Are you sure you're loading up the correct URL? Is there an error message? – thomasfuchs Aug 30 '15 at 16:42
  • I'm on 40.0.3 too, when i debug on IE it works, but not on FF. But this is mostly my issue then i'll have to check, although i have no add-ons. Thanks! – Dillinger Aug 30 '15 at 16:56