清除頁腳以防止內容重疊

我找到了一種放置我喜歡的頁腳的方法，除了頁面調整大小時頁腳與內容重疊的事實。清除頁腳以防止內容重疊

我已經使用了結構和格式，我該如何「清除」頁腳，以便在頁面調整時避免掉落（避免#content的重疊）？

我試過clear: left，這對此無能爲力。

基本上，我希望頁腳始終可見，並且只要空間允許，就附加到窗口的左下角;但是，當窗口變小時，我不希望頁腳重疊我的內容。

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 
html { 
    height: 100%; 
} 
body { 
    background-size: cover; 
    margin: 0; 
    height: 100%; 
} 
#wrapper { 
    min-height: 100%; 
    height: 100%; 
    min-width: 900px; 
    overflow: hidden; 
} 
.main_nav { 
    margin: 0; 
    width: 160px; 
    float: left; 
    padding-left: 40px; 
    overflow: hidden; 
} 
#content { 
    float: left; 
    width: 750px; 
    height: 600px; 
} 
#footer { 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    height: 50px; 
}

HTML：

<body> 
<div id="wrapper"> 
    <div id="header"> 
    <h1></h1> 
    <ul class="main_nav"> 
     <li></li> 
    </ul> 
    </div> 
    <div id="content"> 
    </div> 
</div> 
<div id="footer"> 
    <div id="footer_content"></div> 
</div> 
</body>

來源

2013-05-06 pianoman

請糾正我。您希望在調整瀏覽器窗口大小時隱藏頁腳？ – Ankur 2013-05-06 06:02:23

不，我希望頁腳在空間允許時始終可見;但是，當窗口調整大小（較小）並且沒有足夠的頁腳空間時，我不希望它重疊內容。 – pianoman 2013-05-06 06:30:06

答案已經被選中，但我想給一個替代方案。

「包裝器」包含「標題」和「內容」，而「頁腳」在其外部。你可以，例如，添加

z-index:10;

到包裝的CSS和

z-index:1;

頁腳的CSS。

這最後一個不是真的需要，但它是爲了完整性。這樣，每當他們進入「觸摸」時，具有較高Z指數的那個將保持在前景上（即，在z軸上的較高水平，即垂直於屏幕表面的軸），並且其他元素將在後面滑動，根據自己的指數。

來源

2013-05-06 07:01:20

這個問題是因爲寬度。您的寬度在每種情況下都不同，即內容，頁腳&包裝也是如此。我創建了一個jsfiddle

[http://jsfiddle.net/jvaibhav/xncuF/37/]

試試這個。

來源

2013-05-06 06:02:15

由於浮動菜單，這不起作用。 – pianoman 2013-05-06 06:19:11

清除頁腳以防止內容重疊

回答

相關問題