Question

有一个位于absolute的页面下拉菜单。当菜单可见时，它比body更高，因此它会在footer下方创建一些空格，位于bottom（{{1} } bottom:0。

预期的行为是body下降到滚动区域的底部，并在滚动到底部后可见。

如何在显示下拉列表时强制footer增加其高度或如何使页脚位于底部？当显示高div时，窗口中有一个滚动条，但body不在滚动内容的底部。我不想使用footer，因为页脚粘在窗口的底部并且始终可见。

position: fixed

小提琴 https://jsfiddle.net/ishukshin/84k6tvp6/

Answer 1

CSS不可能，因为从文档流中删除了绝对定位的元素，因此它们的尺寸不能改变其父级的尺寸。它可以通过计算绝对元素的高度并将其作为最小高度应用于父级来完成。

var minHeight = $(".child").height() + $("#footer").height();
$(".parent").css("min-height", minHeight);

#footer {
  height: 50px;
  background: darkblue;
  color: white;
  font-size: 16px;
  position: absolute;
  bottom: 0px;
}

body {
  position: relative;
  min-height: 100%;
  border: 2px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" style="position:relative">
  <div class="child" style="position:absolute; height:1000px;right:30px;top:30px; border:1px solid red;">
    some tall text
  </div>
</div>

body tag has grey border <br> footer is at the bottom of .. what? <br> absolutely positioned div is taller than body <br>

<div id="footer">
  footer
</div>

Answer 2

试试这个:( Dan Philip是对的，你需要javascript / jQuery）

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    function setFooter () {
        var h = $("#longDiv").height();
        h += 50; // add to push the footer further
        $("#footer").offset({top: h,left: 0})
        }
    </script>
    <style>
    #footer{
  width:100%;
  height:50px;
  background:darkblue;
  color: white;
  font-size:16px;
  position:absolute; 
  bottom:0px;
}
.content{
  position:relative;
  min-height:100%;
  border: 2px solid grey;
}
    </style>
    </head>
    <body onload="setFooter();">
    <div class="content" style="position:relative">
      <div id="longDiv" style="position:absolute; height:1000px;right:30px;top:30px; border:1px solid red;">
      some tall text
      </div>
    </div>
    <div class="content" style="position:relative">
    body tag has grey border <br>
    footer is at the bottom of .. what? <br>
    absolutely positioned div is taller than body <br>
    </div>
    <div id="footer">footer</div>
</body>
</html>

如何使身体像巨大的绝对定位div一样高？我需要在底部设置页脚

2 个答案: