<html>
<head>
<style>
.100PercentHeight{ }
</style>
</style>
<body>
<div class='100PercentHeight'>hihi</div>
</body>
</html>
如何将 div 拉伸到页面的 100% 高度?
尝试(它应该适用于大多数浏览器):
.100PercentHeight, html, body {
height : auto !important; /* Ignored by Internet Explorer, applied everywhere else. */
height : 100%; /* Internet Explorer treats as min-height. */
min-height : 100%; /* Internet Explorer ignores this. */
}
申请
html, body, .100PercentHeight{
height:100%;
}
应该会产生您正在寻找的效果。你需要它在所有三个。
但是,它实际上通常不会像您认为的那样做,并且可能会出现问题。假列技术或“粘性页脚”往往效果更好。
<style>
.100PercentHeight{margin:0; height:100%}
</style>
您应该为身体设置 100% 的高度,它应该这样做:
body {
...
height:100%;
...
}
例如,这将起作用。
<div style="width:100%; height:100%; border-style:solid; border-width:5px;">
test
</div>
采用:
{
position: absolute;
top: 0px;
bottom: 0px;
padding: 0px;
margin: 0px;
}
这样,如果页面长度超过一个浏览器视图,它将居中并覆盖页面。
如果您想通过 JavaScript 执行此操作,则此代码应该适用于大多数 DOM 浏览器...
<div id="fullDiv" style="border: solid 2px black;">
Hello example
</div>
<script type="text/javascript">
var div = document.getElementById('fullDiv');
div.style.height = document.documentElement.clientHeight + 'px';
</script>
html {
height: 100%;
}
如果您有 DOCTYPE,这将不起作用。我也在寻找答案,但我有一个 DOCTYPE。但是,有一种方法可以使用 DOCTYPE,但它不适用于两个左右浮动的 div,请尝试:
(div-name) {
position: absolute;
}
请注意,当使用两个相邻浮动的 div 时,这看起来一点也不好看。但是,它适用于任何其他类型。
这是我所知道的最简单的解决方案。然而不幸的是,它在 Internet Explorer 8 和更早版本中不起作用,因为它们不支持 vh(视口高度)单位。
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
#full-height{
min-height: 100vh;
}
</style>
</head>
<body>
<div id='full-height'>
</div>
</body>
</html>