我想要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 ( <div class="wrapper">Content...</div>)。或者，您可以将填充应用于body.