适合浏览器大小的全屏 div答案

【问题标题】：full screen div that fits browser size适合浏览器大小的全屏 div
【发布时间】：2017-10-27 21:05:46
【问题描述】：

我有一个带有 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 是固定的，beforeMenu 和 Menu 大小一样，在 menu 后面。然后我有徽标和 div 类已满。完整之后是带有类内容的div。

当访问该页面时，我希望该 div full 将（大小）介于徽标和底部 od 浏览器大小之间。因此，即使我调整窗口大小，完整的徽标和浏览器大小的底部也必须有一个高度。向下滚动时，用户将看到其余内容。

类似这样的：http://strobedigital.com/

这里是小提琴：http://jsfiddle.net/2963C/

【问题讨论】：

标签： css html

【解决方案1】：

所有现代浏览器都支持一个简单的解决方案。

div#full {
    height: 100vh;
}

唯一值得注意的例外是 4.3 以下的 Android - 但仅在系统浏览器中（Chrome 工作正常）。

浏览器支持图表：http://caniuse.com/viewport-units

【讨论】：

哇！比公认的答案更好！简单但做的工作！谢谢！
100vh 由于旧的 webview 实现，在 Android 4.3 及更低版本上无法运行
vh 和 vw 在 iPhone 上也有问题。

【解决方案2】：

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

html,body{height:100%;}
.wrapper{min-height:100%; position:relative}
.full{position:absolute; top:0; left:0; width:100%; height:100%;}

【讨论】：

谢谢。这适用于一次修改。 menu、behindMenu 和 logo 必须在完整的 div 下。非常感谢。
如果.full下的内容高于.full就不行了必须使用position: fixed;

【解决方案3】：

 .full { min-height: 100%; height:auto;}

【讨论】：

【解决方案4】：

<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>

这里是摆弄解决方案- http://jsfiddle.net/agrawal_rupesh/b7gwK/

【讨论】：

这个解决方案不好，因为内容不在完整的div之后。它在那个 div 后面。

【解决方案5】：

不幸的是，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;
}

【讨论】：