Ormoz Ormoz - 2 months ago 5
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

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.

Comments