Question

我有一个更复杂的解决方案，我减少了样本：

<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内容。问题是顶部栏高度不固定（因为它在我的例子中设置），我希望左栏和内容在顶栏结束后开始。在示例中，内容/左侧栏与不应发生的顶栏重叠，这些应该是一个接一个。任何想法如何解决这个问题（更喜欢最少的代码更改）？

Answer 1

你可以轻松地在jquery中实现这一点：

$(document).ready(function () {
    var height = $("#top_bar").css("height");
    $("#navigation_bar").css("top", height);
    $("#content").css("top", height);

});

如果您不想使用jquery。您不应该使用绝对位置来进行布局。如果你只想要一个固定的顶杆，还有很多其他方法可以达到这个目的。

Answer 2

好吧，您总是可以在top和navigation_bar div的content - 属性中添加一些像素，在您的情况下为58px而不是30px。但是这种方法并不是真正可持续的，因为您必须将top - 属性添加到top_bar下面的所有内容中。更好的解决方案是将navigation_bar和content放在包含top: 58px的包装中，然后包装器中的内容不需要使用{{1}设置样式}。

动态高度与绝对定位

2 个答案: