Fatal编程技术网
  • javascript/
  • Javascript 如何使div占整体身高的百分比？

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

javascript jquery css

Javascript 如何使div占整体身高的百分比？,javascript,jquery,css,Javascript,Jquery,Css,我正在尝试更流畅的设计 我希望特定的div占整个身体的百分比。我还想在每个分区内设置流体/液体填充 <body> <div class='image'></div> <div class='fourty'></div> <div class='sixty'></div> </body> 我遇到的问题是，高度百分比似乎对这些div不起作用。它似乎只是一个基于div内容的自动高度 我如

我正在尝试更流畅的设计

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

<body>
   <div class='image'></div>
   <div class='fourty'></div>
   <div class='sixty'></div>
</body>
我遇到的问题是，高度百分比似乎对这些div不起作用。它似乎只是一个基于div内容的自动高度

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

就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))
我遇到的问题是，高度百分比似乎对这些div不起作用。它似乎只是一个基于div内容的自动高度

这是正确的。原因是您的代码违反了规范

从：

百分比
指定百分比高度。百分比是根据生成的长方体形状的高度计算的 包含块。如果包含块的高度不是 显式指定，并且此元素不是绝对定位的，则该值计算为“auto”

自动
高度取决于其他属性的值

换句话说，如果要使用百分比值，则需要自上而下使用
height
属性

从浏览器的角度来看，
最小高度
（和
最大高度
）不符合此规则，因此，正如规范所述，它们计算为
自动

（与您的代码一起修订）

请在此处阅读更多信息：

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

Firefox似乎同意这一点。最新版本现在也接受
flex
高度。请参见此处的示例：

试着给
身体
和
html
100%的高度。通常身体和内容一样高，这是人们经常遇到的身高问题。是否定义了父元素的高度？请使用获取视口高度的
vh
。所以
height:100vh
我也尝试在html上设置高度-没有改变。托尼，身体的父元素？你是这么说的：我页面上的每个元素都是基于百分比的，所以浏览器不知道如何使主体100%的使用？我想我可能已经解决了我自己的问题。。最好的解决方案是设置一个最小高度，然后div必须调整以适应其中的子内容吗？所以，我的内容是基于文本的。将其设置为基于正文的ems，并将边距和填充设置为div中的百分比。就CSS而言，没有样式可用于使元素的高度等于总文档（正文）高度的某个百分比。-这是不对的。如果使用得当，百分比高度可以正常工作。@Michael_B，您能解释一下如何将元素的高度设置为文档总高度的百分比吗？我只能想象黑客会要求某人以一种几乎总是对他们不利的方式修改他们的HTML。CSS不知道文档的总高度。在HTML元素上使用百分比高度时，没有问题（或需要破解）。在大多数情况下，您只需要指定父对象的高度。 
var targetDiv = document.getElementById('target');

setDivHeight(targetDiv);

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