動力高度與絕對定位

我具有更復雜的解決方案，它減少了我樣品：動力高度與絕對定位

<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

動力高度與絕對定位

回答

相關問題