Menu
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.
890
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.
54
I am interested in your question, thanks for your information of the value of vh and vw. When I read your UPDATE 2. I found there is still something can be improved. The following is:
I change overflow:scroll; to overflow:auto. Because when your page haven't enough height. The value overflow:scroll will create a gray scroll bar. That is unfriendly for user.
I remove the most outer layer <div style="display:block; width:100%; height:95vh !important; overflow:hidden;">...</div> and retain the others. In other word, not to use vh also can be resolved your question.
There is my JSFIDDLE. (NOTICE: the JSFIDDLE is not achieve the effect that the above following. Copy these code on your native browser. I think this reason is about virtual circumstance compatibility. It worked in chorme & Firefox & IE 10)
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
