Html 如何使 <div> 始终全屏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1719452/
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
How to make a <div> always full screen?
提问by Mask
No matter how its content is like.
不管它的内容如何。
Is it possible to do this?
是否有可能做到这一点？
回答by Adam Harte
This always works for me:
这总是对我有用：
<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>
This is probably the simplest solution to this problem. Only need to set four CSS attributes (although one of them is only to make IE happy).
这可能是解决此问题的最简单方法。只需要设置四个 CSS 属性（虽然其中之一只是为了让 IE 开心）。
回答by Mihai Cicu
This is my solution to create a fullscreen div, using pure css. It displays a full screen div that is persistent on scrolling. And if the page content fits on the screen, the page won't show a scroll-bar.
这是我使用纯 css 创建全屏 div 的解决方案。它显示一个在滚动时持久的全屏 div。如果页面内容适合屏幕，页面将不会显示滚动条。
Tested in IE9+, Firefox 13+, Chrome 21+
在 IE9+、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>回答by awe
This is the most stable (and easy) way to do it, and it works in all modern browsers:
这是最稳定（也最简单）的方法，它适用于所有现代浏览器：
.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>Tested to work in Firefox, Chrome, Opera, Vivaldi, IE7+ (based on emulation in IE11).
经测试可在 Firefox、Chrome、Opera、Vivaldi、IE7+（基于 IE11 中的模拟）中工作。
回答by James Donnelly
The best way to do this with modern browsers would be to make use of Viewport-percentage Lengths, falling back to regular percentage lengths for browsers which do not support those units.
使用现代浏览器执行此操作的最佳方法是使用Viewport-percentage Lengths，对于不支持这些单位的浏览器，将回退到常规百分比长度。
Viewport-percentage lengths are based upon the length of the viewport itself. The two units we will use here are vh(viewport height) and vw(viewport width). 100vhis equal to 100% of the height of the viewport, and 100vwis equal to 100% of the width of the viewport.
视口百分比长度基于视口本身的长度。我们将在这里使用的两个单位是vh（视口高度）和vw（视口宽度）。100vh等于视口高度的100vw100%，等于视口宽度的 100%。
Assuming the following HTML:
假设以下 HTML：
<body>
<div></div>
</body>
You can use the following:
您可以使用以下内容：
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;
}
Here is a JSFiddle demowhich shows the divelement filling both the height and width of the result frame. If you resize the result frame, the divelement resizes accordingly.
这是一个JSFiddle 演示，它显示了div填充结果框架的高度和宽度的元素。如果调整结果框架的div大小，元素会相应地调整大小。
回答by Tubbe
I don't have IE Josh, could you please test this for me. Thanks.
我没有 IE Josh，请你帮我测试一下。谢谢。
<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>
回答by Jeff Tian
What I found the best elegant way is like the following, the most trick here is make the div's position: fixed.
我找到了最好的优雅的方式是类似下面，这里最招是让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>
回答by Mori
Change the bodyelement into a flex containerand the divinto a flex item:
将body元素更改为 aflex container并将 the更改div为 a flex item：
body {
display: flex;
height: 100vh;
margin: 0;
}
div {
flex: 1;
background: tan;
}<div></div>回答by olieidel
Here's the shortest solution, based on vh. Please note that vhis not supported in some older browsers.
这是最短的解决方案，基于vh. 请注意，vh在某些较旧的浏览器中不支持。
CSS:
CSS：
div {
width: 100%;
height: 100vh;
}
HTML:
HTML：
<div>This div is fullscreen :)</div>
回答by Shardul
This is the trick I use. Good for responsive designs. Works perfectly when user tries to mess with browser resizing.
这是我使用的技巧。适合响应式设计。当用户尝试调整浏览器大小时，它可以完美运行。
<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>
回答by Josh Stodola
Unfortunately, the heightproperty in CSS is not as reliable as it should be. Therefore, Javascript will have to be used to set the height style of the element in question to the height of the users viewport. And yes, this can be done without absolute positioning...
不幸的是，heightCSS 中的属性并不像它应该的那样可靠。因此，必须使用 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>
