logo标签列表

如何将一个div的高度设置为整个页面的百分比？

javascriptjquerycss
4

我正在尝试一种更流动的设计。

我希望特定的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%。 - Pointy
通常，容器的高度只有内容那么高，这就是人们经常遇到高度问题的地方。你的父元素的高度是否已定义？ - Marie
1
请尝试使用 vh，它可以获取视口高度。因此，可以使用 height: 100vh。 - Lucas
我也尝试在HTML上设置高度，但没有变化。Toni，你的意思是body的父元素？也就是说，我的页面上每个元素都是基于百分比的，所以浏览器不知道如何使body达到100%？ - someoneHere
我想我可能已经解决了自己的问题...最好的解决方案是设置一个最小高度，然后div将根据子内容进行调整。因此，我的内容是基于文本的。将其设置为基于body的ems，并在div内将边距和填充设置为百分比... - someoneHere
这篇博客文章 https://dev59.com/ym035IYBdhLWcg3wC7cR 可能对您有所帮助。 - Blag
2个回答
1
就CSS而言，没有样式可以应用于使元素的高度等于总文档（body）高度的某个百分比。
然而，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))
1
就CSS而言，没有任何样式可以应用于使元素的高度等于总文档（body）高度的某个百分比。这是不正确的。当正确使用时，百分比高度完全可以正常工作。 - Michael Benjamin
@Michael_B，你能解释一下如何将元素的高度设置为整个文档高度的百分比吗？我只能想象出需要某人以几乎总是对他们不利的方式更改他们的HTML的hack。CSS不知道整个文档的高度。 - AJeezy9
在HTML元素上使用百分比高度时，通常不需要解决任何问题（或进行任何黑客）。您只需要在大多数情况下指定父元素的高度即可。https://dev59.com/51wZ5IYBdhLWcg3wM97Z#31728799 - Michael Benjamin
1
我遇到的问题是这些div的百分比高度似乎没有生效。它似乎只是基于div内容的自动高度。
这是正确的。原因是您的代码违反了规范。
来自W3C height property definition:
百分比
指定百分比高度。百分比是相对于生成框的包含块的高度计算的。如果未明确指定包含块的高度且此元素未绝对定位，则该值计算为“auto”。
自动
高度取决于其他属性的值。
换句话说，如果要使用百分比值，则需要从上到下使用height属性。

从浏览器的角度来看，min-height（和max-height）不遵循此规则，因此根据规范，它们计算为auto。

演示（使用您的代码进行修订）

在此处阅读更多信息：使用CSS height属性和百分比值

作为旁注，我认为可以肯定地说height定义已经彻底过时了。自1998年（CSS2）以来就没有更新过，有许多方法可以确定框的高度。仅将百分比高度限制在height属性上不再有太多意义。

Firefox似乎也这样认为。最近的版本现在也接受flex高度。在这里查看示例：

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接