放置一個位於另一個下方的absulte元素

Question

我有兩個絕對定位的元素。他們需要被絕對定位，因爲他們利用左右。上面的一個也使用頂部，下面的一個沒有餘量，因此在向下滾動後會「連接」到瀏覽器窗口的底部。對於上面的一個，我使用最小高度來保持我想要的風格，但如果需要它（如動態內容或小型顯示器），仍然無法防止它增長。我怎樣才能確保下面的元素總是低於上面的？

我正在尋找一個解決方案，無javascript工作。

Answer 1

我會打電話給你的兩個元素header-div和content-div。嘗試在他們周圍添加一個包裝div。那麼你的HTML應該是這樣的：

<div id="wrapper"> 
    <div id="header"> 
    </div> 

    <div id="header"> 
    </div> 
</div> 

現在的位置您wrapper絕對使用從你的頭-DIV的值：

#wrapper { 
    position: absolute; 
    top: yourvalue; 
    left: yourvalue; 
    right: yourvalue; 
} 

，然後添加一些樣式爲你的頭，設置最小高度：

#header { 
    min-height: yourvalue; 
} 

現在你可以在內容中使用的利潤率，來定位它，你想怎麼的，例如，如果你的頭應該有left: 350px;和內容left: 300px;，你可以使用

#content { 
    margin-left: -50px; 
} 

希望這是你所需要的;）