不管内容如何。
有可能做到吗?
不管内容如何。
有可能做到吗?
当前回答
将body元素更改为一个flex container,将div更改为一个flex item:
身体{ 显示:flex; 身高:100 vh; 保证金:0; } div { flex: 1; 背景:棕褐色; } < div > < / div >
其他回答
这对我来说总是有效的:
<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高兴)。
这应该工作,虽然我没有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>
嘿,这招对我很管用
# splashScreen { 背景颜色:白色; 位置:绝对的; 上图:0 px; 左:0 px; 宽度:100%; 高度:100%; 溢出:汽车; max-width: 2000 px; }
这是基于vh的最短解。请注意,vh在一些较旧的浏览器中不受支持。
更新:自从我发布这篇文章已经四年了。与此同时,大多数浏览器都应该支持这一点。
CSS:
div {
width: 100%;
height: 100vh;
}
HTML:
<div>This div is fullscreen :)</div>
在现代浏览器中做到这一点的最好方法是使用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元素也会相应地调整大小。