CSS。身高等于文件高度

Question

在内容较小且身高：100％的情况下，页脚被按到窗口底部，弹出一个绝对很长的菜单（比身高更长）会增加文档的高度，导致很多页脚后的自由空间。问题是此时身高高于文件高度。

如何使用css强制主体高度跟随文档的高度。

Example on jsfiddle

body, html {
  height: 100%;
  padding: 0;
  margin: 0;
}
.main {
  border: 1px solid red;
  height: 100%;
}
.ab {
  left: 2em;
  top: 2em;
  right: 10em;
  height: 150vw;
  position: absolute;
  border:1px solid yellow;
}

<div class="main">
 <div class="ab"></div>
</div>
<style>

</style>

UPD。正在寻找一个css解决方案。在JS（jQuery）上，它可以像这样完成：

$("body").height($(document).height());

Answer 1

问题是由于.ab元素有position: absolute;。这会导致元素从文档流中取出，从而导致文档高度不变。

将.ab更改为position: relative以解决此问题，但这可能需要进行一些其他HTML /布局更改。

function addElement() {

  document.getElementById("ab").classList.add("show")
}

html,
body {
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
}
.main {
  border: 1px solid red;
  min-height: 100%;
  box-sizing: border-box;
}
#ab {
  box-sizing: border-box;
  width: 90vw;
  margin: 30px 5vw;
  height: 150vw;
  position: relative;
  border:1px solid yellow;
  display: none;
}

#ab.show {
  display: block;
}

<div class="main">
 <div id="ab"></div>
 <button onclick="addElement()">Add tall element</button>
</div>
<style>

</style>

Answer 2

你可以试试这个会增加主div的高度并删除滚动，否则你可以给溢出y：滚动

    body, html {
      height: 100%;
      padding: 0;
      margin: 0;
    }
   .main {
   border: 1px solid red;
   height:100%;
   overflow-y:scroll;
   position:relative;
}
.ab {
  left: 2em;
  top: 2em;
  right: 10em;
  height: 150vw;
  position: absolute;
  border:1px solid yellow;
}

<div class="main">
 <div class="ab"></div>
</div>
<style>

</style>