Javascript 100%屏幕大小，不考虑分辨率

我正在尝试创建一个网站，用户可以在一系列部分之间进行垂直导航。基本上，无论屏幕分辨率如何，每个部分都占据整个屏幕，并且底部有一个按钮，可以向下滚动到下一个全屏分区。你知道如何处理这个问题吗？按钮看起来很简单，但我不太确定如何实现全屏div

---

谢谢

作为一种方法，您一次只想在div上显示，因此您可能想看看各种JS slider插件是如何工作的（最健壮和灵活的插件之一是Flexslider by WooThemes）

您需要确保当前可见的任何“幻灯片”都有一个占据整个屏幕的固定位置：

.slide {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

然后把你的内容放进去。也就是说，我对这种方法的可用性表示怀疑。

包含站点所有可显示html的

div占据了整个屏幕

通过将div的

高度

和

宽度

设置为100%，您可以确保它占据其包含div的全部空间

使用“高度”和“宽度”属性并将其设置为“百分比”，可以创建占据整个屏幕的div和内容，无论其大小如何

---

您可以使用查看站点在不同桌面、平板电脑和移动屏幕上的外观

如果你说的是全屏幕窗口，那就不确定了。但是，如果您正在谈论占用整个浏览器的宽度和高度，那么必须尝试

使这些部分处于绝对位置

将它们与顶部=0和左侧=0对齐，宽度和高度均为100%

只需让每个部分上的按钮知道如何显示下一部分并隐藏当前部分

• 确保这些节的父元素没有相对定位，否则将失败

第1节内容
第1节内容
第1节内容4

您的css：

截面1、#截面2、#截面3{位置：绝对；顶部：0；左侧：0；宽度：100%；高度：100%；} 您的Jquery脚本

$（“[id*=btnSec]”）。在（“单击”上，函数（e）{ var sec=$（this.attr（“id”）.split（“btnSec-”）[1]； var nextSec=数量（秒）+1； $（“#容器”）.children（）.hide（）； $（“#节”+nextSec.show（）； })

---

高度：100%

并不总是有效。该值仅与父容器相关。@ChrisFerdinandi是的，我相信我在第二行中提到了这一点，“通过将div的高度和宽度设置为100%，可以确保它占据其包含div的全部内容”@ChrisFerdinandi我确实认为，为了使百分比

宽度

和

高度

设置起作用，父div必须有

位置

值

相对

对不起，配偶，不知怎的错过了最后一位。对于这个用例，我仍然不确定100%高度设置是否足够可预测。谢谢您的帮助！我来试一试。这是我老板的要求

 <div id="container">
    <div id="section1">Section1Content <button id="btnSec-1"></button></div>
    <div id="section2">Section1Content <button id="btnSec-2"></button></div>
    <div id="section3">Section1Content <button id="btnSec-3"></button></div>4
    </div>