我想要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;">
但不幸的是height，此message_bar的变量是可变的且未知（它的内容是在服务器端动态设置的）。
有什么办法可以纯粹地解决这个问题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，它巧妙地工作！
无论如何，我必须感谢这里的社区。即使没有提供答案，讨论和不同观点也会激发思考过程并简化解决方案的查找。
单纯使用CSS解决此问题的唯一方法是在页面顶部添加条形图的副本，position: relative并使用较低的z-index。此重复的栏将始终隐藏在固定栏的后面（您可以opacity: 0; pointer-events: none根据需要使用），并将其余页面向下推。但是，此解决方案非常丑陋，因为它添加了许多HTML。
我建议将JavaScript与jQuery结合使用，以获得一个非常简单的解决方案。
$(document).ready(function() {
$('.wrapper').css('padding-top', $('.message_bar').outerHeight());
});
并围绕页面（<div class="wrapper">Content...</div>）的内容创建包装器div 。或者，您可以将填充物应用于body。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句