如何解决居中的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;
}
问题是,当我调整浏览器的窗口高度,家庭容器和页脚重叠对方。有任何想法吗?
答
你可以尝试这样的事情:
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;
}
答
沿着什么@ schmidt382说台词:
添加到您的CSS:
body {
min-width:640px;
}
通过设定的最小宽度,该页面的body
将只缩小到该尺寸并且不会变小。只需将其设置为任何您需要的尺寸,以防止div笨拙地移动。
答
试试这个
#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;
}
我会用不居中'#家庭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