如何解决居中的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和页脚重叠？

回答

相关问题