如何使一个<div>总是全屏？
不pipe其内容如何。
是否有可能做到这一点？
这总是适合我：
<head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> html, body { height: 100%; margin: 0; } #wrapper { min-height: 100%; } </style> <!--[if lte IE 6]> <style type="text/css"> #container { height: 100%; } </style> <![endif]--> </head> <body> <div id="wrapper">some content</div> </body> 这可能是解决这个问题最简单的方法。 只需要设置四个CSS属性（尽pipe其中的一个只是让愚蠢的 IE开心）。
这是我使用纯CSS创build全屏div的解决scheme。 它显示一个在滚动上持久的全屏div。 如果页面内容适合在屏幕上，页面将不会显示滚动条。
testingIE9 +，Firefox 13 +，Chrome 21 +
<!doctype html> <html> <head> <meta charset="utf-8" /> <title> Fullscreen Div </title> <style> .overlay { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(51,51,51,0.7); z-index: 10; } </style> </head> <body> <div class='overlay'>Selectable text</div> <p> This paragraph is located below the overlay, and cannot be selected because of that :)</p> </body> </html>
这是最稳定（也是最容易）的方法，它适用于所有现代浏览器：
.fullscreen { position: fixed; top: 0; left: 0; bottom: 0; right: 0; overflow: auto; background: lime; /* Just to visualize the extent */ }
<div class="fullscreen"> Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. </div>
使用现代浏览器来做到这一点的最好方法是使用视口百分比长度 ，回到不支持这些单位的浏览器的常规百分比长度。
视口百分比长度基于视口本身的长度。 我们在这里使用的两个单位是vh （视口高度）和vw （视口宽度）。 100vh等于视口高度的100％， 100vw等于视口宽度的100％。
假设以下HTML：
<body> <div></div> </body>
您可以使用以下内容：
html, body, div { /* Height and width fallback for older browsers. */ height: 100%; width: 100%; /* Set the height to match that of the viewport. */ height: 100vh; /* Set the width to match that of the viewport. */ width: 100vw; /* Remove any browser-default margins. */ margin: 0; }
这是一个JSFiddle演示 ，它显示了填充结果框架高度和宽度的div元素。 如果您调整结果框架， div元素相应地resize。
我没有IE浏览器乔希，请你为我testing一下。 谢谢。
<html> <head> <title>Hellomoto</title> <style text="text/javascript"> .hellomoto { background-color:#ccc; position:absolute; top:0px; left:0px; width:100%; height:100%; overflow:auto; } body { background-color:#ff00ff; padding:0px; margin:0px; width:100%; height:100%; overflow:hidden; } .text { background-color:#cc00cc; height:800px; width:500px; } </style> </head> <body> <div class="hellomoto"> <div class="text">hellomoto</div> </div> </body> </html>
我发现最好的优雅方式就像下面这样，这里最诡异的是让div的position: fixed 。
.mask { background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: 0; box-sizing: border-box; width: 100%; height: 100%; object-fit: contain; }
<html> <head> <title>Test</title> </head> <body> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <div class="mask"></div> </body> </html>
将body元素更改为flex container ，将div放入flex item ：
body { display: flex; height: 100vh; margin: 0; } div { flex: 1; background: tan; }
<div></div>
这是我使用的技巧。 良好的响应式devise。 当用户试图弄乱浏览器resize时，完美的工作。
<head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> #container { position: absolute; width: 100%; min-height: 100%; left: 0; top: 0; } </style> </head> <body> <div id="container">some content</div> </body>
不幸的是，CSS中的height属性并不像应该那样可靠。 因此，必须使用Javascript将所讨论的元素的高度风格设置为用户视口的高度。 是的，这可以做到没有绝对定位…
<!DOCTYPE html> <html> <head> <title>Test by Josh</title> <style type="text/css"> * { padding:0; margin:0; } #test { background:#aaa; height:100%; width:100%; } </style> <script type="text/javascript"> window.onload = function() { var height = getViewportHeight(); alert("This is what it looks like before the Javascript. Click OK to set the height."); if(height > 0) document.getElementById("test").style.height = height + "px"; } function getViewportHeight() { var h = 0; if(self.innerHeight) h = window.innerHeight; else if(document.documentElement && document.documentElement.clientHeight) h = document.documentElement.clientHeight; else if(document.body) h = document.body.clientHeight; return h; } </script> </head> <body> <div id="test"> <h1>Test</h1> </div> </body> </html>
