Html 适合浏览器大小的全屏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18096378/
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
full screen div that fits browser size
提问by repincln
I have a html document with div and css like this:
我有一个带有 div 和 css 的 html 文档，如下所示：
<html>
<head>
<title></title>
<style text="text/javascript">
body { padding:0px; margin:0px; }
.full { background-color: yellowgreen; width: 100%; height: 100%; }
.menu { height: 50px; width: 100%; background-color: black; position: fixed; }
.behindMenu { height: 50px; width: 100%; }
.logo {width: 100%; height: 150px;}
.content {background-color: yellow;}
</style>
</head>
<body>
<div class="menu">Menu</div>
<div class="behindMenu"></div>
<div class="logo">Logo</div>
<div class="full">Full div</div>
<div class="content">The rest content</div>
</body>
</html>
Menu is fixed, behindMenu is the same size as Menu and it is behind menu. Then I have logo and div with class full. After the full is div with class content.
Menu 是固定的， behindMenu 与 Menu 大小相同，并且位于 menu 后面。然后我有满班的标志和 div。完整是带有类内容的div。
When visit that page I want that div full will be (size) between logo and bottom od the browser size. So the full must have a height between logo and bottom of the browser size, even if I resize window. When scroll down then user will see The rest of content.
当访问该页面时，我希望该 div 完整将（大小）介于徽标和浏览器大小的底部之间。因此，即使我调整窗口大小，完整的徽标和浏览器大小底部之间也必须有一个高度。向下滚动时，用户将看到其余内容。
Something like this: http://strobedigital.com/
像这样的东西：http: //strobedigital.com/
Here is fiddle: http://jsfiddle.net/2963C/
这是小提琴：http: //jsfiddle.net/2963C/
采纳答案by Anon
HTML
HTML
<html>
<head>
<title></title>
<style text="text/css">
body { padding:0px; margin:0px; }
.full { background-color: yellowgreen; width: 100%; height: 100%; }
.menu { height: 50px; width: 100%; background-color: black; position: fixed; }
.behindMenu { height: 50px; width: 100%; }
.logo {width: 100%; height: 150px;}
.content {background-color: yellow;}
</style>
</head>
<body>
<div class="wrapper">
<div class="menu">Menu</div>
<div class="behindMenu"></div>
<div class="logo">Logo</div>
<div class="full">Full div</div>
<div class="content">The rest content</div>
</div>
</body>
</html>
CSS
CSS
html,body{height:100%;}
.wrapper{min-height:100%; position:relative}
.full{position:absolute; top:0; left:0; width:100%; height:100%;}
回答by Tomek Kobyliński
There is a simple solution supported by all modern browsers.
所有现代浏览器都支持一个简单的解决方案。
div#full {
height: 100vh;
}
The only notable exception is the Android below 4.3 - but only in the system browser (Chrome works ok).
唯一值得注意的例外是低于 4.3 的 Android - 但仅限于系统浏览器（Chrome 工作正常）。
Browser support chart: http://caniuse.com/viewport-units
浏览器支持图表：http: //caniuse.com/viewport-units
回答by ParVathi
.full { min-height: 100%; height:auto;}
回答by Rupesh
<html>
<head>
<style text="text/javascript">
html,body{height:100%;}
.wrapper{min-height:100%; position:relative}
.full{position:absolute; left:0; width:100%; min-height:100%;}
.menu { height: 50px; width: 100%; background-color: black; position: fixed; }
.behindMenu { height: 50px; width: 100%; }
.logo {width: 100%; height: 150px;}
.content {background-color: yellow;}
</style>
</head>
<body>
<div class="wrapper">
<div class="menu">Menu</div>
<div class="behindMenu"></div>
<div class="logo">Logo</div>
<div class="full">Full div</div>
</div>
<div class="content">The rest content</div>
</body>
</html>
Here is fiddle with solution- http://jsfiddle.net/agrawal_rupesh/b7gwK/
这里是摆弄解决方案 - http://jsfiddle.net/agrawal_rupesh/b7gwK/
回答by Rupesh
Unfortunately vhand vwis very buggy with iPhone but nearly all browsers (going way back) is happy doing some math for you:
不幸的是vh和vw是非常错误与iPhone但几乎所有的浏览器（要回来的路上）是乐于做一些数学为您提供：
html,body {
height:100%;
margin:0;
}
.full {
height: calc(100% - 50px); /* Minus menu height */
min-height: calc(100% - 50px); / *for Mozilla */
}
html>body .full {
height:auto;
}
