CSS。正文高度等于文档高度答案

【问题标题】：CSS. Body height equal to document heightCSS。正文高度等于文档高度
【发布时间】：2018-06-05 21:37:38
【问题描述】：

在内容较小且 body height: 100% 的情况下，页脚被压到窗口底部，弹出的绝对超长菜单（比 body 高）会增加文档的高度，导致在页脚之后有很多可用空间。问题是此时正文高度小于文档高度。

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

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>

更新。正在寻找一个 CSS 解决方案。在 JS (jQuery) 上，可以这样做：

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

【问题讨论】：

正文是文档。你想在你的例子中匹配什么元素？
我对符号的错误表示歉意我希望一个视觉图片和 jQuery 的例子能让你知道我想要什么
您想要纯 CSS 解决方案吗？或者是否允许使用一些 JavaScript/jQuery？
查看更新 - 我知道 js 解决方案，我正在寻找 css ..

标签： css height document absolute

【解决方案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>

【讨论】：

例子大大简化了，你不会使弹出菜单相对。
是的，这是这里的让步之一。不幸的是，唯一的选择是使用 JavaScript 将一个类应用于body 或main 元素以改变它们的高度。照原样，.ab 元素具有 position: absolute; 它不会影响元素的高度。
如果你想让它影响其他元素的高度，那么不要使用绝对位置

【解决方案2】：

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

    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>

【讨论】：

看来您需要.. 我将在动态弹出菜单上签入我的项目。它适用于jsfiddle.net/swed/ckzwsLcn/9
哦不.. 错误隐藏了！
是的，当然……顺便说一句，“看来您需要……”是什么意思
我急忙回答，没有看到示例中隐藏了“弹出菜单”的那部分
你可以检查overflow-y:scroll