javascript - 在单击 scrollTo 函数之前,如何让 div 占据全屏?

标签 javascript jquery html css

例如,在这个人的网站 ( 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/

相关文章:

javascript - Backbone 集合模型不可访问

javascript - 如何在ajax成功时重新启用提交按钮?

Javascript 模板系统 - PURE、EJS、jquery 插件?

javascript - 该代码未在浏览器中为 cookie 生成文件

javascript - 无法获取隐藏标签值

javascript - 使用功能保持图像源更改

javascript - 如何在 ReactJS 的父组件上设置事件监听器?

javascript - jQuery 有时无法与 Ruby on Rails 一起使用

JQuery多导航菜单问题

javascript - 如何在单击按钮时显示 div?