例如,在这个人的网站 ( http://salleedesign.com/home/ ) 中,无论您将窗口放大多少,包含他的名字和背景 img 的 div 都会占据整个屏幕,直到您向下滚动或单击“阅读”更多”链接,它具有 scrollTo 功能。谁能给我解释一下?
最佳答案
您可以通过在 div 元素的样式属性中使用 VW(视口(viewport)宽度) 和 VH(视口(viewport)高度) CSS3 单位来实现此效果。
例子:
#landing-box {
width: 100vw;
height: 100vh;
}
1VW 单位等于视口(viewport)宽度的 1%。同样,1VH 单位等于视口(viewport)高度的 1%。因此,如果您将 div 的宽度属性设置为 100vw,将其高度属性设置为 100vh,那么它将始终为视口(viewport)的 100% 宽度和高度。
一个常见的误解是只使用带有百分比值的宽度和高度属性,但这些将是相对于另一个元素的高度/宽度,不是视口(viewport)的高度。
您链接的网站上的元素从顶部开始并且不是固定的,这让您产生它基于某种滚动功能的错觉。滚动后您会立即到达另一个元素,因为第一个元素的大小非常适合您的视口(viewport)。
如果您想实现该站点上使用的滚动按钮,这也使它变得非常容易,因为您知道您的 div 的高度始终为 100vh,因此这就是您必须以编程方式向下滚动的数量JavaScript。
关于javascript - 在单击 scrollTo 函数之前,如何让 div 占据全屏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45947167/