Html DIV 高度设置为屏幕的百分比？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15843391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DIV height set as percentage of screen?
提问by EdzJohnson
I'm looking to set a parent DIV as 70% of the full 100% screen height. I've set the following CSS but it doesn't seem to do anything:
我希望将父 DIV 设置为整个 100% 屏幕高度的 70%。我已经设置了以下 CSS，但它似乎没有做任何事情：
body {
font-family: 'Noto Sans', sans-serif;
margin: 0 auto;
height: 100%;
width: 100%;
}
.header {
height: 70%;
}
For some reason it doesn't seem to be working though and the header isn't 70% of the screen size. Any advice?
出于某种原因，它似乎不起作用，标题不是屏幕尺寸的 70%。有什么建议吗？
回答by Salman
回答by Human Being
This is the solution,
这是解决方案，
Add the htmlalso to 100%
html也添加到100%
html,body {
height: 100%;
width: 100%;
}
回答by btevfik
回答by aleclarson
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 Arash moradabadi
By using absolute positioning, you can make <body>or <form>or <div>, fit to your browser page. For example:
通过使用绝对定位，您可以使<body>或<form>或<div>适合您的浏览器页面。例如：
<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 heightor widthyou wish
然后简单地把<div>它里面和使用的任何百分比，无论是height或者width你希望
<div id="divContainer" style="height: 100%;">
