我正在尝试更流畅的设计。
我希望特定的 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 中实现这一点更感兴趣。
最佳答案
就 CSS 而言，没有任何样式可以使元素的高度等于整个文档(正文)高度的特定百分比。
然而，CSS 确实为您提供了将元素的高度设置为视口(viewport)高度的特定百分比(使用 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';
};
初始设置高度和视口(viewport)调整大小:
var targetDiv = document.getElementById('target');
setDivHeight(targetDiv);
window.addEventListener('resize', setDivHeight.bind(null, targetDiv))
关于javascript - 如何使div占整体高度的百分比？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34366289/