不管它的内容如何。
是否有可能做到这一点？
问问题
514581 次
10 回答
170
这总是对我有用：
<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 属性（虽然其中一个只是为了让 IE 开心）。
于 2009-11-12T02:31:17.027 回答
135
这是我使用纯 css 创建全屏 div 的解决方案。它显示一个全屏 div，它在滚动时是持久的。如果页面内容适合屏幕，页面将不会显示滚动条。
在 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>于 2012-08-16T07:32:26.147 回答
75
这是最稳定（也是最简单）的方法，它适用于所有现代浏览器：
.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>经测试可在 Firefox、Chrome、Opera、Vivaldi、IE7+ 中工作（基于 IE11 中的仿真）。
于 2014-05-30T09:43:09.803 回答
38
使用现代浏览器执行此操作的最佳方法是使用Viewport-percentage Lengths ，对于不支持这些单位的浏览器，回退到常规的百分比长度。
视口百分比长度基于视口本身的长度。我们将在这里使用的两个单位是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元素会相应地调整大小。
于 2014-05-28T09:44:01.103 回答
21
这应该可行，尽管我没有 IE 来测试。
<html>
<head>
<title>Hellomoto</title>
<style type="text/css">
.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>
于 2009-11-12T08:48:01.807 回答
17
这是最短的解决方案，基于vh. 请注意，某些较旧的浏览器vh不支持该功能。
CSS：
div {
width: 100%;
height: 100vh;
}
HTML：
<div>This div is fullscreen :)</div>
于 2018-12-25T14:18:24.877 回答
9
将元素更改body为 flex 容器和divflex 项：
body {
display: flex;
height: 100vh;
margin: 0;
}
div {
flex: 1;
background: tan;
}<div></div>于 2017-03-24T08:03:33.350 回答
8
我发现最好的优雅方式如下所示，这里最技巧的是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>
于 2016-05-18T03:13:52.387 回答
2
这是我使用的技巧。适合响应式设计。当用户尝试调整浏览器大小时完美运行。
<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>
于 2015-11-22T00:42:20.837 回答
-9
不幸的是，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>
于 2009-11-12T02:34:23.807 回答