Question

我有一个垂直和水平居中的主容器和一个我想要粘在页面底部的页脚：

HTML CODE：

<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;
}

问题在于，当我调整浏览器的窗口高度时，主页 - 容器和页脚会相互重叠。有什么想法吗？

Answer 1

您可以尝试这样的事情：

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;
}

Answer 2

与@ schmidt382所说的一致：

将此添加到您的CSS：

body {
min-width:640px;
}

通过设置最小宽度，页面的body将缩小到该大小，并且不会缩小。只需将其设置为您需要的任何大小，以防止div笨拙地移动。

Answer 3

试试这个

#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;
}

如何修复居中的div和footer重叠？

3 个答案: