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％且边框的框将比您想要的宽一些。

Answer 2

可以使用calc()来解决。在这种情况下，您可以创建一个jQuery函数，其高度为footer-content和footer-footer - ＆gt; .height()。没有jQuery，我认为这是不可能的。
这是一个例子：

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

}

#content {
    height:calc(100% - 135px);
    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%;
}

http://jsfiddle.net/dokmngv0/

浏览器支持calc()功能：http://caniuse.com/#feat=calc

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

2 个答案: