位置：絕對內部位置：相對原因內容重疊

Question

我有一個main元素，我已將它設置爲position: relative。這包含兩個div，然後我申請position: absolute。這會導致頁眉和頁腳夾住main元素，然後相互碰撞。我怎樣才能阻止呢？

使用浮動和清除頁腳似乎給我想要的兩列布局。但我不確定在IE6/7上會出現什麼樣的解決方案是多麼「堅固」。代碼codepen。

Answer 1

main中的所有元素都是絕對定位的，因此main的高度計算爲零，因此標題的底部邊緣緊挨着頁腳的頂部邊緣。如果將高度添加到main，則會在頁眉和頁腳之間打開空間。

考慮下面的HTML：

<header>Header</header> 
<main> 
    <div id="text"> 
    <p>Some text</p> 
    </div> 
    <div id="links"> 
    <ul> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
    </ul> 
    </div> 
</main> 
<footer> 
    <p>Footer</p> 
</footer> 

可以實現使用花車一兩欄佈局顯示在下面的CSS：

main { 
position: relative; 
height: auto; 
overflow: auto; 
border: 1px solid blue; 
} 

#text { 
float: left; 
width: 500px 
} 

#links { 
float: left; 
width: 400px; 
} 

您需要設置overflow: auto您main容器包含浮標（相當於清除它們）。

另外，請確保浮動元素的寬度不是太寬，否則如果屏幕太小，它們會換行到第二行。在http://codepen.io/anon/pen/gGsjd

腳註

觀看演示：使用溢出：汽車與明確的：既

我傾向於使用overflow: auto，但在某些情況下，該clear屬性是需要什麼。在某些時候，請閱讀http://www.w3.org/TR/CSS2/visuren.html#block-formatting的「塊格式化上下文」選擇一種方法的原因有點微妙，選擇取決於您嘗試實現的佈局細節，它在響應中的表現方式方式等。