如何在高度未知的情況下制作水平條（固定位置，始終位於屏幕頂部）怎么樣？

Question

我想在HTML頁面的頂部有一個水平欄。 它應該始終位於屏幕的頂部，所以我做了這個：

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

現在，這個酒吧不應該覆蓋身體的其他部分。 如果我知道它的高度，那么讓它為50px，我會這樣做：

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

但不幸的是，這個message_bar的height是可變的和未知的（它的內容是在服務器端動態設置的）。

有沒有辦法純粹通過CSS解決這個問題？

非常感謝你。

PS此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查看了它，它工作得很整齊！

無論如何，我必須感謝這里的社區; 即使沒有提供答案，討論和不同的觀點也會激發思考過程並簡化解決方案的發現。

Answer 1

使用純CSS解決此問題的唯一方法是在頁面頂部添加一個副本，其position: relative和較低的z-index。 這個重復的欄總是隱藏在固定的欄后面（你可以使用opacity: 0; pointer-events: none如果需要，則為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 。

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

Answer 3

你為什么不只使用相對位置？ 移除position: fixed; 。 這就是它的樣子：

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

編輯：我不認為，你可以用純CSS實現這個，如果你不知道消息的高度。 但你可以使用jQuery：

$("#message_bar").show(function() {
    $( ".other_divs" ).css("margin-top", $(this).height() + "px");
});

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

Answer 4

你可以有一個沒有滾動條的類，然后position屬性將是position:absolute; 但如果你想在滾動的情況下保持這個topHeader不變，你必須使用.fixed類

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

...並且你有一些javascipt來綁定scrol事件：

var pixels= 50;  //in pixels

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

如何在高度未知的情況下制作水平條（固定位置，始終位於屏幕頂部）怎么樣？

問題描述

4 個解決方案

解決方案1
2 已采納 2014-09-14 11:16:06

解決方案2
2 2014-09-15 03:05:12

解決方案3
0 2014-09-14 10:58:18

解決方案4
0 2014-09-14 11:08:50

如何在高度未知的情況下制作水平條（固定位置，始終位於屏幕頂部）怎么樣？

問題描述

4 個解決方案

解決方案1 2 已采納 2014-09-14 11:16:06

解決方案2 2 2014-09-15 03:05:12

解決方案3 0 2014-09-14 10:58:18

解決方案4 0 2014-09-14 11:08:50

解決方案1
2 已采納 2014-09-14 11:16:06

解決方案2
2 2014-09-15 03:05:12

解決方案3
0 2014-09-14 10:58:18

解決方案4
0 2014-09-14 11:08:50