Top bar

Nulla eu risus quis magna suscipit malesuada vel quis nisi. Cras suscipit nulla vitae ante rhoncus, id elementum nisi interdum. Integer sem quam, tincidunt nec quam ac, lobortis volutpat ipsum.Donec eu imperdiet.

Top bar

Nulla eu risus quis magna suscipit malesuada vel quis nisi. Cras suscipit nulla vitae ante rhoncus, id elementum nisi interdum. Integer sem quam, tincidunt nec quam ac, lobortis volutpat ipsum.Donec eu imperdiet.
Putting a content div (a div containing the content of the page) beneath a topbar div whose height we don't want to specify is a simple matter if both divs have position: relative. We don't have to use javascript to obtain the result we want. But if we want the top bar to have position: fixed, then displaying the content div beneath the top bar without using javascript seems impossible, since we need a way to calculate the (dynamic) height of the top bar. The top position of the content div must indeed correspond with the height of the top bar (in the most simple cases; to calculate the height of the top bar, we would use its clientHeight property).

But what if we don't want javascript? As Coothead made clear in this DynamicDrive-thread, we can obtain what we want by putting an exact invisibe copy of the topbar div just before or after it and then replacing position: fixed with position: relative (for the copy). Also, we should remove from the copy all CSS that is not relevant for elements having position: relative (like right: 0 etc.). Another possibility is to just remove position: fixed and all 'non-relevant CSS' in the copy. The content bar will now be displayed at the correct (top) position, since we have mimicked a situation where a div having position: relative is put beneath another div having the same CSS-property.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
</head>

<body>

<!-- TOP BAR: FIXED POSITION -->
<div style="position: fixed; left: 0; top: 0; right: 0; padding: 1.25em; background: #f00; text-align: center ">
<h1>Top bar</h1>
Nulla eu risus quis magna suscipit malesuada vel quis nisi. Cras suscipit nulla vitae ante rhoncus, id elementum nisi interdum. Integer sem quam, tincidunt nec quam ac, lobortis volutpat ipsum. Donec eu imperdiet.
</div>

<!-- COPY: RELATIVE POSITION. IRRELEVANT CSS REMOVED -->
<div style="position: relative; visibility: hidden; padding: 1.25em; ">
<h1>Top bar</h1>
Nulla eu risus quis magna suscipit malesuada vel quis nisi. Cras suscipit nulla vitae ante rhoncus, id elementum nisi interdum. Integer sem quam, tincidunt nec quam ac, lobortis volutpat ipsum. Donec eu imperdiet.
</div>

<div style="padding: 20px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</div>

</body>
</html>