Geek Answers Handbook

How can I make a horizontal strip (fixed position, always at the top of the screen) while its height is unknown?

I want a horizontal bar at the top of the page HTML. It should always be at the top of the screen, so I did 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 panel should not cover the rest of the body. If I knew its height, for example, say 50 pixels, I would do this:

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

But, unfortunately, heightthis line message_bar is variable and unknown (the content is set dynamically on the server side).

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

Many thanks.

P.S. message_bar Windows: , . , vertical scroll bar "other_divs".

2:

, ! , , CSS. 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>

Chrome, IE FireFox, !

, ; , .

+4
4

CSS - position: relative z. ( opacity: 0; pointer-events: none, ) . , HTML.

JavaScript jQuery .

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

div (<div class="wrapper">Content...</div>). body.

+2

, vh vw. UPDATE 2. , . .

  • overflow:scroll; overflow:auto. , . overflow:scroll . .

  • <div style="display:block; width:100%; height:95vh !important; overflow:hidden;">...</div> . , vh .

  • JSFIDDLE. (: JSFIDDLE , . , . chorme Firefox IE 10)

+2

? position: fixed;. :

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");
});

http://jsfiddle.net/darekkay/8ab6uw7n/2/

0
source

You may have a class in which there are no scrollbars, and then the position property will be, position:absolute; but if you want this topHeader to be fixed in case of scrolling, you should use .fixedclass

.topHeader {
    background:#345;
    color:#FFF;
    height:50px;
    padding:.5em;
    position:absolute;
    top:50px;
    width:100%;
}
.fixed {
    position:fixed;
    top:0;
}

... and you need javascipt to bind the scrol event:

var pixels= 50;  //in pixels

    $(window).bind('scroll', function () {
        if ($(window).scrollTop() > pixels) {
            $('.topHeader ').addClass('fixed');
        } else {
            $('.topHeader ').removeClass('fixed');
        }
    });
0
source

More articles:


All Articles