如何使div占整体身高的百分比？答案

【问题标题】：how to make a div a percentage of the overall body height?如何使div占整体身高的百分比？
【发布时间】：2016-03-25 19:01:22
【问题描述】：

我正在尝试更流畅的设计。

我希望特定的 div 占整体的百分比。我还想在每个 div 中设置流体/液体填充。

<body>
   <div class='image'></div>
   <div class='fourty'></div>
   <div class='sixty'></div>
</body>

CSS：

body {
 margin-top: 85px;
 min-height: 100%;
}

.image {
  content: image_url('something.jpg');
  width: 100%;
  height: auto;
}

/*I'm assuming the padding I'm setting is a percentage of the .fourty
  div not the overall body. Granted, width is 100%.*/
.fourty{
  padding: 4% 8%;
  min-height: 40%;
  width: 100%;
}

.sixty{
  padding: 4% 8%;
  min-height: 60%;
  width: 100%;
 }

我遇到的问题是百分比高度似乎对这些 div 无效。它似乎只是基于 div 内容的自动高度。

我该如何纠正/实现这一点？我对 JS 解决方案持开放态度，但对如何在 CSS 中实现这一点更感兴趣。

【问题讨论】：

尝试将body 和html 的高度都设为100%。
通常身体只有内容一样高，这就是人们经常遇到身高问题的地方。你的父元素高度定义了吗？
研究使用获取视口高度的vh。所以height: 100vh
我也尝试在 html 上设置高度 - 没有变化。托尼，body的父元素？你是在说什么：我页面上的每个元素都是基于百分比的，所以浏览器不知道让 body 100% 的内容是什么？
我想我可能已经想出了我自己的问题.. 最好的解决方案是设置一个最小高度，然后 div 必须适应其中的子内容吗？所以，我的内容是基于文本的。将其设置为基于 body 的 ems，并将边距和填充设置为 div 内的百分比...

标签： javascript jquery css

【解决方案1】：

就 CSS 而言，您无法应用任何样式来使元素的高度等于文档（正文）总高度的某个百分比。

但是，CSS 确实为您提供了将元素高度设置为视口高度的特定百分比的选项（使用 VH 单位），但是由于这不能实现您的目标，我会给您一个 javascript 答案.

相关的javascript函数：

function getDocumentHeight() {
  return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight);
};

function setDivHeight(target, percentage) {
    var desiredHeight = getDocumentHeight() * (percentage/100)
    target.style.height = desiredHeight + 'px';
};

初始设置高度并调整视口大小：

var targetDiv = document.getElementById('target');

setDivHeight(targetDiv);

window.addEventListener('resize', setDivHeight.bind(null, targetDiv))

【讨论】：

就 CSS 而言，没有任何样式可以让元素的高度等于整个文档（正文）高度的某个百分比。 --这是不正确的。如果使用得当，百分比高度就可以正常工作。
@Michael_B，您能解释一下如何将元素的高度设置为整个文档的百分比吗？我只能想象需要有人以一种几乎总是对他们不利的方式更改他们的 HTML 的黑客行为。 CSS 不知道文档的总高度。
在 HTML 元素上使用百分比高度时没有问题（或需要 hack）。在大多数情况下，您只需要指定父级的高度。 stackoverflow.com/a/31728799/3597276

【解决方案2】：

我遇到的问题是百分比高度似乎对这些 div 无效。它似乎只是基于 div 内容的自动高度。

没错。原因是你的代码违反了规范。

来自W3C height property definition：

百分比
指定百分比高度。百分比是根据生成框的高度计算的包含块。如果包含块的高度不是明确指定且此元素不是绝对定位的，则该值计算为“自动”。

auto
高度取决于其他属性的值。

换句话说，如果您要使用百分比值，则需要从上到下使用height 属性。

从浏览器的角度来看，min-height（和max-height）不遵守此规则，因此，正如规范所说，它们计算为auto。

DEMO（带有您的代码，已修改）

在此处阅读更多信息：Working with the CSS height property and percentage values

顺便说一句，我认为可以肯定地说height 定义已经完全过时了。它自 1998 年以来一直没有更新 (CSS2)，并且有很多方法可以确定盒子的高度。将百分比高度仅限制在 height 属性不再有意义。

Firefox 似乎同意。最近的版本现在也接受flex 高度。在此处查看示例：

【讨论】：