不管内容如何。
有可能做到吗?
当前回答
这应该工作，虽然我没有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>
其他回答
我发现最优雅的方法是像下面这样，这里最技巧的是使div的位置:固定。
.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>
这对我来说总是有效的:
<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高兴)。
不幸的是，CSS中的height属性并不像它应该的那样可靠。因此，必须使用Javascript来将所讨论元素的height样式设置为用户视口的高度。是的，这可以在没有绝对定位的情况下完成……
<!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>
这是最稳定(和简单)的方法，在所有现代浏览器中都适用:
.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的仿真)。
这是基于vh的最短解。请注意，vh在一些较旧的浏览器中不受支持。
更新:自从我发布这篇文章已经四年了。与此同时，大多数浏览器都应该支持这一点。
CSS:
div {
width: 100%;
height: 100vh;
}
HTML:
<div>This div is fullscreen :)</div>
