如何解決居中的div和頁腳重疊？

我有垂直和水平居中，我想堅持到頁面底部的主容器和頁腳：如何解決居中的div和頁腳重疊？

HTML代碼：

<div id="home-container">content goes here</div> 
<div id="footer">footer</div>

CSS代碼：

body { 
    min-height:350px; 
} 
#home-container { 
    width: 730px; 
    height:310px; 
    position:absolute; 
    left: 50%; 
    top: 50%; 
    margin:-155px 0 0 -365px; 
} 
#footer { 
    width:500px; 
    border:1px solid red; 
    position:absolute; 
    left:50%; 
    bottom:0; 
    margin-left:-250px; 
}

問題是，當我調整瀏覽器的窗口高度，家庭容器和頁腳重疊對方。有任何想法嗎？

來源

2013-04-30 Cris

我會用不居中'＃家庭container'用'位置去：絕對的;'和使用http://ryanfait.com/sticky-footer/ – 2013-04-30 22:55:59

另一回事嘗試在與頁腳高度相同的內容中使用div，以便將其壓低。 – rncrtr 2013-04-30 22:59:05

或其他 - 響應式解決方案將檢查負載和調整客戶端的高度是否大於「家容器」和「頁腳」的高度加在一起並相應地更改它們的CSS。 – 2013-04-30 23:00:39

你可以嘗試這樣的事情：

body { 
     min-height:350px; 
     text-align:center; 
} 
#home-container { 
     text-align: left; 
     width: 730px; 
     height:310px; 
    display:inline-block; 
    margin-bottom: 10px 
} 
#footer { 
    display:inline-block; 
    width:500px; 
     text-align: left; 
     border:1px solid red; 
     bottom: 0; 
}

來源

2013-04-30 23:05:40 tnschmidt

沿着什麼@ schmidt382說臺詞：

添加到您的CSS：

body { 
min-width:640px; 
}

通過設定的最小寬度，該頁面的body將只縮小到該尺寸並且不會變小。只需將其設置爲任何您需要的尺寸，以防止div笨拙地移動。

來源

2013-04-30 23:21:26

試試這個

#home-container { 
top: 50% 
margin-top: -310px; 
width: 730px; 
height:310px; 
position:absolute; 
left:0; 
right:0; 
margin-left:auto; 
margin-right:auto; 
} 
#footer { 
width:500px; 
border:1px solid red; 
position:absolute; 
bottom:0; 
left:0; 
right:0; 
margin-left:auto; 
margin-right:auto; 
}

來源

2013-05-01 00:10:46

如何解決居中的div和頁腳重疊？

回答

相關問題