How is it possible to make a horizontal bar (fixed position, always at the top of screen) while its height is unknown?
Question
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.
PS 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.
4 answers
solution1
2 ACCPTED 2014-09-14 11:16:06
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 .
solution2
2 2014-09-15 03:05:12
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;tooverflow:auto. Because when your page haven't enough height. The valueoverflow:scrollwill 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 usevhalso 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)
solution3
0 2014-09-14 10:58:18
Why don't you just use relative positions? Remove position: fixed; . That's how it looks like:
http://jsfiddle.net/darekkay/8ab6uw7n/1/
Edit: I don't think, you can achieve this with pure CSS, if you don't know the height of the message. But you can use jQuery:
$("#message_bar").show(function() {
$( ".other_divs" ).css("margin-top", $(this).height() + "px");
});
solution4
0 2014-09-14 11:08:50
You can have a class where are no scrollbars and then the position property will be position:absolute; but if you want to keep this topHeader fixed in case of scrolling you have to use .fixed class
.topHeader {
background:#345;
color:#FFF;
height:50px;
padding:.5em;
position:absolute;
top:50px;
width:100%;
}
.fixed {
position:fixed;
top:0;
}
...and you some javascipt to bind scrol event:
var pixels= 50; //in pixels
$(window).bind('scroll', function () {
if ($(window).scrollTop() > pixels) {
$('.topHeader ').addClass('fixed');
} else {
$('.topHeader ').removeClass('fixed');
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.