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

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

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

---

问题是，当我调整浏览器窗口高度时，主容器和页脚彼此重叠。有什么想法吗？

您可以尝试以下方法：

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

通过设置最小宽度，页面的

正文

将仅收缩到该大小，而不会更小。只需将其设置为您需要的大小，以防止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;
}

---

我会选择不居中的

#主容器
位置：绝对
使用另一种方法是在内容中添加一个与页脚高度相同的div，将其向下推。或者，另一种响应性解决方案是在加载和调整大小时检查客户端高度是否大于添加在一起的主容器和页脚高度，并相应地更改css。