82

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

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

出于某种原因，它似乎不起作用，并且标题不是屏幕尺寸的 70%。有什么建议吗？

4

5 回答 5

210

尝试使用视口高度

div {
    height:100vh; 
}

这里已经详细讨论过了

于 2013-12-30T07:21:00.763 回答
8

这是解决方案，

也添加html到100%

html,body {

   height: 100%;
   width: 100%;

}
于 2013-10-10T10:32:27.883 回答
7

absolute为该 div定位。

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

于 2013-04-05T20:58:29.103 回答
2

如果您希望它基于屏幕高度，而不是窗口高度：

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'
})
于 2017-11-19T00:28:13.673 回答
0

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

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

然后简单地在<div>里面放一个并使用任何百分比height或者width你想要的

<div id="divContainer" style="height: 100%;">
于 2019-05-01T11:35:35.027 回答