不管内容如何。
有可能做到吗?
当前回答
这就是我使用的技巧。适合响应式设计。工作完美时，用户试图与浏览器调整大小混乱。
<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>
其他回答
将body元素更改为一个flex container，将div更改为一个flex item:
身体{ 显示:flex; 身高:100 vh; 保证金:0; ｝ div { flex: 1; 背景:棕褐色; ｝ < div > < / div >
这是最稳定(和简单)的方法，在所有现代浏览器中都适用:
.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的仿真)。
在现代浏览器中做到这一点的最好方法是使用Viewport-percentage length，对于不支持这些单位的浏览器，使用常规的百分比长度。
视口百分比长度基于视口本身的长度。我们在这里使用的两个单位是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元素也会相应地调整大小。
这是基于vh的最短解。请注意，vh在一些较旧的浏览器中不受支持。
更新:自从我发布这篇文章已经四年了。与此同时，大多数浏览器都应该支持这一点。
CSS:
div {
width: 100%;
height: 100vh;
}
HTML:
<div>This div is fullscreen :)</div>
这是我创建一个全屏div的解决方案，使用纯css。 它在滚动时显示一个持久的全屏div。 如果页面内容适合屏幕，页面就不会显示滚动条。
在IE9+， Firefox 13+， Chrome 21+测试
<！doctype html > < html > < >头 <meta charset="utf-8" /> <title>全屏Div </title> . <时尚> .overlay { 位置:固定; 宽度:100%; 高度:100%; 左:0; 上图:0; 背景:rgba(51岁,51,51岁,0.7); z - index: 10; ｝ > < /风格 > < /头 <身体> <div class='overlay'>可选文本 <p>这个段落位于覆盖层的下面，因此不能被选择:) 身体< / > < / html >
