动力高度与绝对定位

我具有更复杂的解决方案，它减少了我样品：动力高度与绝对定位

<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某些内容。问题是顶部酒吧的高度是不固定的（因为它是在我的例子中设置），我想要在顶部酒吧结束后开始左边的酒吧和内容。在示例中，内容/左栏与顶栏不重合，这些应该是一个接一个。任何想法如何解决这个问题（宁愿最小代码更改）？

来源

2014-11-25 Laurian Vostinar

可以easilly jQuery中实现这一点，像这样：

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

});

如果你不想使用jquery。您不应该使用绝对位置来进行布局。如果你只是想要一个固定的顶部栏有许多其他方式来实现这一目标。

来源

2014-11-25 13:30:44

那么，你总是可以添加一些像素到-属性的navigation_bar和content divs，在你的情况58px而不是30px。但是这种方法并不可行，因为您必须将top属性添加到top_bar下的所有内容中。更好的解决方案是将navigation_bar和content放在一个包含top: 58px的包装器中，然后包装器中的内容不需要使用position: relative进行样式化。

来源

2014-11-25 13:38:36

问题是50像素的高度真的是动态的（即具有可变数量项目的工具栏）。所以，这就是为什么在这种情况下不能使用top声明。我正在寻找一种方法来解决这个问题，而不必改变我的整个布局。 – 2014-11-25 14:28:42

动力高度与绝对定位

回答

相关问题