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

我希望设置一个父 DIV 为整个屏幕高度的70% 。我已经设置了以下 CSS，但它似乎没有任何作用:

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

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

html
css

134421 次浏览

小开

make position absolute for that div.

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

小开

This is the solution ,

Add the html also to 100%

html,body {


height: 100%;
width: 100%;


}

小开

Try using Viewport Height

div {
height:100vh;
}

It is already discussed here in detail

小开

If you want it based on the screen height, and not the window height:

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'
})

小开

By using absolute positioning, you can make <body> or <form> or <div>, fit to your browser page. For example:

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

and then simply put a <div> inside it and use whatever percentage of either height or width you wish

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