Ada*_*rte 138
这对我来说总是有用的:
<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开心).
- @ P.Alex Math!如果您的HTML标记高度延伸到适合其内容,那么主体高度是其父级的100%,那么您将不会强制它达到可用空间的100%. (2认同)
Mih*_*icu 102
这是我使用纯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>awe*_*awe 54
这是最稳定(最简单)的方法,它适用于所有现代浏览器:
.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中的仿真).
- 如果您使用以下内容，效果会更好：`position: fixed; 顶部：0；left: 0;` 现在是不同的部分：`width: 100%; 高度：100%;`. 这实际上也可以在旧浏览器中完美运行。 (2认同)
- 为什么使用宽度和高度比使用底部和右侧更好？如果您使用宽度和高度，并且还想要一些填充和/或边框，您还需要确保您有`box-sizing: border-box;`，否则您将获得更大的框，从而导致滚动。请参阅[此](https://www.w3schools.com/css/css3_box-sizing.asp)。 (2认同)
Jam*_*lly 29
使用现代浏览器执行此操作的最佳方法是使用视口百分比长度,回退到不支持这些单元的浏览器的常规百分比长度.
视口百分比长度基于视口本身的长度.我们将在这里使用的两个单位是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大小,则元素会相应调整大小.
小智 18
我没有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>
- 我听说有更现代的方法可以解决这个问题。@Tubbe 你知道这是真的吗？ (2认同)
我找到了最好的优雅的方式是类似以下,最招这里是做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元素更改为a flex container并将其更改div为flex item:
body {
display: flex;
height: 100vh;
margin: 0;
}
div {
flex: 1;
background: tan;
}<div></div>这是基于的最短解决方案vh。请注意，某些旧版浏览器vh不支持。
CSS：
div {
width: 100%;
height: 100vh;
}
HTML：
<div>This div is fullscreen :)</div>
- 它很方便，但在移动浏览器中存在问题：https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ (2认同)
| 归档时间： |
|
| 查看次数： |
364077 次 |
| 最近记录： |