How to style a div content after fixed div header with dynamic height

css html position fixed
user1162738 picture user1162738 · Jul 2, 2012 · Viewed 8.6k times · Source

following situation:

<body>
 <div style="position:fixed; width:100%">[place holder for header]</div>
 <div style="position:relative;width:100%;margin-top:100px">[content]</div>
</body>

I need the header always visible and at the top, so this one should be with position:fixed. A problem occurs after self adjustments of the header - height. If the header is higher than 100px a part of the content is hidden.

How can I (CSS) dynamically set the start position of the content div regarding the end of the header.

Answer

insertusernamehere picture insertusernamehere · Jul 3, 2012

I'm still looking for a CSS only solution, but for the moment here's an idea using just one line of JavaScript – when using jQuery:

JavaScript

$(document).ready(function () {
    $('#content').css('marginTop', $('#header').outerHeight(true) );
});

HTML

<body>
    <div id="header" style="[…]">[place holder for header]</div>
    <div id="content" style="[…]">[content]</div>
</body>

The advantage of using .outerHeight(true) is, that it takes care of borders and margins you may have applied to your header.

Related questions

How to overlay one div over another div

I need assistance with overlaying one individual div over another individual div. My code looks like this: <div class="navi"></div> <div id="infoi"> <img src="info_icon2.png" height="20" width="32"/> </…

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Slide right to left?

How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left? Most everything I see out there is always left to right.

Read More