我有一个更复杂的解决方案，我将其简化为示例:
<html>
<body>
<div id="top_bar" style="position:fixed;width:100%;background-color:red;">
<div style="position: relative; width:200px;height: 50px;background-color:black;"></div>
</div>
<div id="navigation_bar" style="position:absolute;left:0;top:30px; background-color:orange;width:200px">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
<div id="content" style="position:absolute;left:200px;top:30px; bottom:0;right:0">
<div style="position:absolute;left:0;top:0; bottom:0;right:0;background-color: blue">
</div>
</div>
</body>
</html>
http://plnkr.co/edit/DC51eyvQJVuIlPyiQIr4?p=preview
基本上，我有一个顶部栏、一个左侧栏和一些 html 格式的内容。问题是顶部栏的高度不固定(在我的示例中设置)，我希望左侧栏和内容在顶部栏结束后开始。在示例中，内容/左侧栏与顶部栏重叠，这是不应该发生的，它们应该一个接一个地出现。有什么想法可以解决这个问题(希望代码更改最少)？
最佳答案
您可以像这样在 jquery 中轻松实现此目的:
$(document).ready(function () {
var height = $("#top_bar").css("height");
$("#navigation_bar").css("top", height);
$("#content").css("top", height);
});
如果你不想使用jquery。你不应该使用绝对位置来制作你的布局。如果您只想要一个固定的顶部栏，还有许多其他方法可以实现。
关于html - 绝对定位的动态高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27127770/