Ormoz Ormoz - 1 year ago 38
CSS Question

How is it possible to make a horizontal bar (fixed position, always at the top of screen) while its height is unknown?

I want a horizontal bar at the top of

HTML
page. It should always be at the top of the screen, So I made this:

<body>
<div id="message_bar" style="position: fixed; top: 0px; width: 100%; z-index: 1000;">
</div>

<div class="other_divs" style="width: 100%; float: left;">
</div>
</body>


Now, this bar should not cover the rest of the body. If I knew the height of it, let's be 50px for example, I would do it by:

<body style="padding-top: 50px;">


But unfortunately, the
height
of this message_bar is variable and unknown (It's contents are set dynamically at server-side).

Is there any way to solve this problem purely by
CSS
?

Thank you very much.

P.S.
This message_bar would display like menu bars in windows applications: they are always at the top, and they never cover the main body. In fact,
vertical scroll bar
starts from "other_divs".

UPDATE 2:

Hey, Unbelievable! I guess I've managed to create the potential layout for a horizontal menu bar, purely with
CSS
. Here is my solution thanks to the power of
vh
:

<body>
<div style="display:block; width:100%; height:95vh !important; overflow:hidden;">
<div id="message_bar" style="float:left; width:100%; display:block;" >
this text appears always on top
</div>
<div style="float:left; width:100%; height:100%; display:block; overflow:auto;">
<div id="main_content" style="background:blue;">
Here lies the main content of the page.
<br />The below line is a set of 40 list items added to occupy space
<ol><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li></ol>
</div>
</div>
</div>
</body>


I checked it in
Chrome
,
IE
, and
FireFox
, and it worked neatly!

Anyway, I must thank the community here; Even when no answer is provided, the discussion and different viewpoints stimulate thinking process and eases solution finding.

Answer Source

The only way to solve this with purely CSS is adding a duplicate of the bar at the top of the page with position: relative and a lower z-index. This duplicate bar would always be hidden behind the fixed one (you could use opacity: 0; pointer-events: none if needed) and would push the rest of the page down. However this solution is very ugly as it adds a lot of HTML.

I recommend using JavaScript with jQuery for a pretty easy solution.

$(document).ready(function() {
    $('.wrapper').css('padding-top', $('.message_bar').outerHeight());
});

And create a wrapper div around the content of the page (<div class="wrapper">Content...</div>). Alternatively, you could apply the padding to the body.