html - 调整窗口大小时如何避免绝对底部定位的div与其他div重叠

Question

我有一个页面，我在页面底部有一个 div，单击它会显示另一个 div，就在底部 div 的上方。

我想避免在调整窗口大小时页脚 div 与页面上方的内容 div 重叠。

所涉及的 div 的高度不应改变。

是否可以使用纯 CSS 解决方案？

我创建了一个 jsfiddle here

CSS

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
#container {
  height: 100%;
  width: 100%;
  background-color: white;
  border: solid #aaa 1px;
  padding: 4px;
}

#content {
  height: 300px;
  border: solid blue 1px;
}

#footer-content {
  height: 100px;
  border: solid red 1px;
  display:none;
}

#footer-footer {
  cursor: pointer;
  height: 20px;
  border: solid cyan 1px;
}

#footer.expanded #footer-content {
  display:block;
}

#footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
}

HTML

 <div id="container">
   <div id="content">content
    </div>
   <div id="footer">
    <div id="footer-content">footer-content</div>
    <div id="footer-footer">Click me to expand</div>
   </div>
 </div>

JS

$("#footer-footer").on("click", function (evt) {
  $("#footer").toggleClass("expanded");
});

Answer 1

只需将 position: relative 添加到#container。这样页脚的绝对定位是指容器。

http://jsfiddle.net/5bkznxud/5/

您可能会注意到，在上面的示例中，右侧始终有一个滚动条。这是因为#container 上的边框和填充。这是一个带有轮廓(没有计算宽度的边框)且没有任何填充的示例:

http://jsfiddle.net/5bkznxud/6/

提示:始终使用轮廓而不是边框​​来阻止布局或使用 box-sizing: border-box。这会导致框的尺寸也计算边框。否则，宽度为 100% 且边框的框会比您想要的稍宽。