Html 全视口元素
我想知道如何在任意大小的浏览器窗口中获得覆盖100个视口的全屏介绍元素？当你开始滚动时，你可以看到主页的其余部分。请看下面的示例链接 他们使用的是电影，但我只对一个简单的div感兴趣，并使用覆盖屏幕的背景图像。我试图分析网页，我猜他们没有使用任何背景文件，而只是一个不同层次的div？了解如何做到这一点会很有趣 我做了一个简单的测试，我用很多虚拟文本填充了它（我在这里粘贴代码之前删除了所有文本），但是看起来intre div保持全屏，我无法滚动到页面的其余部分Html 全视口元素,html,css,Html,Css,我想知道如何在任意大小的浏览器窗口中获得覆盖100个视口的全屏介绍元素？当你开始滚动时，你可以看到主页的其余部分。请看下面的示例链接 他们使用的是电影，但我只对一个简单的div感兴趣，并使用覆盖屏幕的背景图像。我试图分析网页，我猜他们没有使用任何背景文件，而只是一个不同层次的div？了解如何做到这一点会很有趣 我做了一个简单的测试，我用很多虚拟文本填充了它（我在这里粘贴代码之前删除了所有文本），但是看起来intre div保持全屏，我无法滚动到页面的其余部分 <!DOCTYPE html
<!DOCTYPE html>
<html>
<head>
<style>
#intro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: red;
}
</style>
</head>
<body>
<div id="intro">Intro</div>
<div class="container">Page content</div>
</body>
</html>
#介绍{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：红色；
}
简介
页面内容
如果u设置高度：100%；您不能滚动，而不是高度：100%放置高度：自动；基于它将占用的文本 或 如果u移除高度：100%；它也会起作用 或
如果u设置高度：100%；您不能滚动，而不是高度：100%放置高度：自动；基于它将占用的文本 或 如果u移除高度：100%；它也会起作用 或
如果u设置高度：100%；您不能滚动，而不是高度：100%放置高度：自动；基于它将占用的文本 或 如果u移除高度：100%；它也会起作用 或
您可以将
vhcalc（）函数一起使用。VH采用100%的浏览器高度，我们还有页眉，因此您可以通过calc
请添加css
#顶部{
计算（100vh-71px）
}
您可以将vh
与calc（）函数一起使用。VH采用100%的浏览器高度，我们还有页眉，因此您可以通过calc
请添加css
#顶部{
计算（100vh-71px）
}
您可以将vh
与calc（）函数一起使用。VH采用100%的浏览器高度，我们还有页眉，因此您可以通过calc
请添加css
#顶部{
计算（100vh-71px）
}
您可以将vh
与calc（）函数一起使用。VH采用100%的浏览器高度，我们还有页眉，因此您可以通过calc
请添加css
#顶部{
计算（100vh-71px）
}
您需要使用，vw
和vh
视口百分比长度定义了相对于视口大小的长度
视口，即文档的可见部分。只有
基于Gecko的浏览器正在动态更新视口值，
修改视口的大小时（通过修改视口的大小）
桌面计算机上的窗口或通过在电话上打开设备
或平板电脑）
正文{
保证金：0；
}
div{
高度：100vh；
宽度：100vw；
最大宽度：100%；/*防止水平滚动条*/
背景：蓝色；
}
分区：第n个孩子（奇数）{
背景：黄色；
}
您需要使用，vw
和vh
视口百分比长度定义了相对于视口大小的长度
视口，即文档的可见部分。只有
基于Gecko的浏览器正在动态更新视口值，
修改视口的大小时（通过修改视口的大小）
桌面计算机上的窗口或通过在电话上打开设备
或平板电脑）
正文{
保证金：0；
}
div{
高度：100vh；
宽度：100vw；
最大宽度：100%；/*防止水平滚动条*/
背景：蓝色；
}
分区：第n个孩子（奇数）{
背景：黄色；
}
您需要使用，vw
和vh
视口百分比长度定义了相对于视口大小的长度
视口，即文档的可见部分。只有
基于Gecko的浏览器正在动态更新视口值，
修改视口的大小时（通过修改视口的大小）
桌面计算机上的窗口或通过在电话上打开设备
或平板电脑）
正文{
保证金：0；
}
div{
高度：100vh；
宽度：100vw；
最大宽度：100%；/*防止水平滚动条*/
背景：蓝色；
}
分区：第n个孩子（奇数）{
背景：黄色；
}
您需要使用，vw
和vh
视口百分比长度定义了相对于视口大小的长度
视口，即文档的可见部分。只有
基于Gecko的浏览器正在动态更新视口值，
修改视口的大小时（通过修改视口的大小）
桌面计算机上的窗口或通过在电话上打开设备
或平板电脑）
正文{
保证金：0；
}
div{
高度：100vh；
宽度：100vw；
最大宽度：100%；/*防止水平滚动条*/
背景：蓝色；
}
分区：第n个孩子（奇数）{
背景：黄色；
}
正文{
保证金：0；
填充：0；
}
.介绍{
高度：100vh；
背景颜色：浅灰色；
}
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个非常有趣的故事。Nam nunc sapien，sodales a mauris nec，faucibus aliquet Elite。休止符和euismod justo，vel blandit nulla。在苏打菜中，车辆苏打菜。毛里斯·廷西德·杜伊·胡斯托（Mauris tincidunt dui justo），nec finibus purus euismod。这是一个很好的例子。阿利奎姆felis feugiat non拍卖馆长consequat quam。在tincidunt suscipit feugiat。在nunc nec nunc酵母菌tristique ut ac elit的Etiam。拉齐尼亚·泰卢斯·维塔西·佩伦茨克。索达莱斯迪亚姆的维瓦摩斯，埃吉特·波苏尔酒后驾车。Sed ac
#intro{height:50%;}
.container{height:50%;}