如何在高度未知的情况下制作水平条（固定位置，始终位于屏幕顶部）怎么样？

Question

I want a horizontal bar at the top of HTML page. 我想在HTML页面的顶部有一个水平栏。 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: 如果我知道它的高度，那么让它为50px，我会这样做：

 <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). 但不幸的是，这个message_bar的height是可变的和未知的（它的内容是在服务器端动态设置的）。

Is there any way to solve this problem purely by CSS ? 有没有办法纯粹通过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. PS此message_bar将在Windows应用程序中显示类似菜单栏：它们始终位于顶部，并且它们从不覆盖主体。 In fact, vertical scroll bar starts from "other_divs". 实际上， vertical scroll bar从“other_divs”开始。

UPDATE 2: 更新2：

Hey, Unbelievable! 嘿，难以置信！ I guess I've managed to create the potential layout for a horizontal menu bar, purely with CSS . 我想我已经设法为纯水平的菜单栏创建了潜在的布局，纯粹是用CSS 。 Here is my solution thanks to the power of vh : 这是我的解决方案，感谢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! 我在Chrome ， IE和FireFox查看了它，它工作得很整齐！

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. 即使没有提供答案，讨论和不同的观点也会激发思考过程并简化解决方案的发现。

Answer 1

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. 使用纯CSS解决此问题的唯一方法是在页面顶部添加一个副本，其position: relative和较低的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. 这个重复的栏总是隐藏在固定的栏后面（你可以使用opacity: 0; pointer-events: none如果需要，则为opacity: 0; pointer-events: none ），并将页面的其余部分向下推。 However this solution is very ugly as it adds a lot of HTML. 然而，这个解决方案非常难看，因为它添加了大量的HTML。

I recommend using JavaScript with jQuery for a pretty easy solution. 我推荐使用JavaScript和jQuery来实现一个非常简单的解决方案。

$(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> ). 并围绕页面内容创建一个包装器div（ <div class="wrapper">Content...</div> ）。 Alternatively, you could apply the padding to the body . 或者，您可以将填充物应用于body 。

Answer 2

I am interested in your question, thanks for your information of the value of vh and vw . 我对您的问题感兴趣，感谢您提供有关vh和vw价值的信息。 When I read your UPDATE 2 . 当我读到你的UPDATE 2 。 I found there is still something can be improved. 我发现还有一些东西可以改进。 The following is: 以下是：

I change overflow:scroll; 我改变overflow:scroll; to overflow:auto . overflow:auto 。 Because when your page haven't enough height. 因为当你的页面没有足够的高度。 The value overflow:scroll will create a gray scroll bar. 值overflow:scroll将创建一个灰色滚动条。 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. 我删除了最外层<div style="display:block; width:100%; height:95vh !important; overflow:hidden;">...</div>并保留其他层。 In other word, not to use vh also can be resolved your question. 换句话说，不使用vh也可以解决你的问题。
There is my JSFIDDLE. 有我的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) （注意：JSFIDDLE没有达到以下效果。 在原生浏览器上复制这些代码。我认为这个原因与虚拟环境兼容性有关。它适用于chorme＆Firefox＆IE 10）

Answer 3

Why don't you just use relative positions? 你为什么不只使用相对位置？ Remove position: fixed; 移除position: fixed; . 。 That's how it looks like: 这就是它的样子：

http://jsfiddle.net/darekkay/8ab6uw7n/1/ 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. 编辑：我不认为，你可以用纯CSS实现这个，如果你不知道消息的高度。 But you can use jQuery: 但你可以使用jQuery：

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

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

Answer 4

You can have a class where are no scrollbars and then the position property will be position:absolute; 你可以有一个没有滚动条的类，然后position属性将是position:absolute; but if you want to keep this topHeader fixed in case of scrolling you have to use .fixed class 但如果你想在滚动的情况下保持这个topHeader不变，你必须使用.fixed类

.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: ...并且你有一些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