Ormoz Ormoz - 8 months ago 25
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

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

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

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

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
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

Thank you very much.

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".


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

<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 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

I checked it in
, and
, 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.


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.