使用什么技术来创建受页面折叠限制的 div？

Question

跳过关于折叠在网页设计中的重要性的讨论，我想知道哪种技术用于限制浏览器上的特定部分（例如 div）折叠考虑响应式设计。一些网站甚至使用鼠标滚动和按钮滑动到下面的部分。

例如：Next

我的重点不是幻灯片本身，而是无论显示器分辨率如何，每个部分如何准确呈现在折叠上。

Answer 1

与：

window.innerHeight

您可以知道浏览器的高度 window 并据此设置元素的样式。

我假设折叠是指无需滚动即可看到的内容。

如果您需要更向后兼容的 (<I.E9) 高度，您可以使用 jquery:

$( window ).height();

Answer 2

您可以尝试使用 css 计量单位 vh。假设您有一个 div，您只想占据屏幕的一半（视口），您可以这样做：

div{
    height: 50vh;
}

vh 代表 "Viewport Height"，用作百分比。因此，无论屏幕大小或分辨率如何，要让 div 始终占据 100% 的可视区域（视口），您可以这样做：div { height: 100vh; }

Answer 3

我会使用 document.documentElement.clientHeight 和 document.documentElement.clientWidth，它们本质上是 html 元素的宽度和高度：

$('div').css({'height':document.documentElement.clientHeight+'px',
              'width':document.documentElement.clientWidth+'px'});

每次调整 window 大小时，您都必须重新执行此代码，以保持框底部与页面折叠齐平。

What technique is used to create a div limited by the page fold?