不管内容如何。
有可能做到吗?
不管内容如何。
有可能做到吗?
当前回答
嘿,这招对我很管用
# 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>
我发现最优雅的方法是像下面这样,这里最技巧的是使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>
嘿,这招对我很管用
# splashScreen { 背景颜色:白色; 位置:绝对的; 上图:0 px; 左:0 px; 宽度:100%; 高度:100%; 溢出:汽车; max-width: 2000 px; }
这是最稳定(和简单)的方法,在所有现代浏览器中都适用:
.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的仿真)。
我用这个简单的方法解决了我的问题。此外,无论页面滚动多长时间,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*/
}
希望这能有所帮助。