我想要在 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>
现在，这个栏不应该覆盖 body 的其余部分。如果我知道它的高度，例如 50px，我会这样做:
<body style="padding-top: 50px;">
但不幸的是，这个 message_bar 的 height 是可变的并且是未知的(它的内容是在服务器端动态设置的)。
有没有什么办法可以纯靠CSS来解决这个问题？
非常感谢。
附言
这个 message_bar 会像 Windows 应用程序中的菜单栏一样显示:它们总是在顶部，并且永远不会覆盖主体。实际上，垂直滚动条是从“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 .
关于html - 高度未知时如何制作水平条(固定位置，始终位于屏幕顶部)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25832494/