Question

我希望将父DIV设置为完整100％屏幕高度的70％。我已经设置了以下CSS，但它似乎没有做任何事情：

body {
font-family: 'Noto Sans', sans-serif;
margin: 0 auto;
height: 100%;
width: 100%;
}
.header {
height: 70%;
}

由于某种原因，它似乎没有工作，标题不是屏幕大小的70％。有什么建议吗？

Answer 1

尝试使用视口高度

div {
    height:100vh; 
}

已经详细讨论了here

Answer 2

为该div设置位置absolute。

http://jsfiddle.net/btevfik/KkKeZ/

Answer 3

这是解决方案，

将html也添加到100%

html,body {

   height: 100%;
   width: 100%;

}

Answer 4

如果你想要它基于屏幕高度，而不是窗口高度：

const height = 0.7 * screen.height

// jQuery
$('.header').height(height)

// Vanilla JS
document.querySelector('.header').style.height = height + 'px'

// If you have multiple <div class="header"> elements
document.querySelectorAll('.header').forEach(function(node) {
  node.style.height = height + 'px'
})

Answer 5

通过使用绝对定位，您可以使<body>或<form>或<div>适合您的浏览器页面。例如：

<body style="position: absolute; bottom: 0px; top: 0px; left: 0px; right: 0px;">

然后将<div>放入其中，并使用所需的height或width的任意百分比

<div id="divContainer" style="height: 100%;">

DIV高度设置为屏幕的百分比？

5 个答案: