不管内容如何。
有可能做到吗?
不管内容如何。
有可能做到吗?
当前回答
我用这个简单的方法解决了我的问题。此外,无论页面滚动多长时间,div始终保持全屏。
#fullScreenDiv {
position: fixed;
top: 0;
bottom: 0;
left: 0; /*If width: 100%, you don't need it*/
right: 0; /*If width: 100%, you don't need it*/
}
希望这能有所帮助。
其他回答
这是我创建一个全屏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 >
我用这个简单的方法解决了我的问题。此外,无论页面滚动多长时间,div始终保持全屏。
#fullScreenDiv {
position: fixed;
top: 0;
bottom: 0;
left: 0; /*If width: 100%, you don't need it*/
right: 0; /*If width: 100%, you don't need it*/
}
希望这能有所帮助。
这对我来说总是有效的:
<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高兴)。
这是最稳定(和简单)的方法,在所有现代浏览器中都适用:
.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的仿真)。
嘿,这招对我很管用
# splashScreen { 背景颜色:白色; 位置:绝对的; 上图:0 px; 左:0 px; 宽度:100%; 高度:100%; 溢出:汽车; max-width: 2000 px; }