jquery - 如何修复居中的 div 和页脚重叠？

Question

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

HTML 代码：

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

代码：

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