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

Question

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

交货。:下一个

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

Answer 1

您可以尝试使用css度量单位vh。假设你有一个div，你只想占用一半的屏幕(视口)，你会这样做:

div{
    height: 50vh;
}

vh代表"Viewport Height"，像百分比一样使用。因此，无论屏幕大小或分辨率如何，要使div始终占据可查看区域(viewport)的100%，您将这样做:div { height: 100vh; }

Answer 2

With:

window.innerHeight

你可以知道浏览器窗口的高度，并相应地设置元素的样式。

我假设你说的折叠是指你不滚动就能看到的东西。

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

$( window ).height();

Answer 3

我会使用document.documentElement.clientHeight和document.documentElement.clientWidth，它们实际上是html元素的宽度和高度:

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

http://jsfiddle.net/L1wsLc2c/1/

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