如何使一个<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> 

我发现最好的优雅方式就像下面这样,这里最诡异的是让divposition: 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>