SECTION1，＃2节，＃SECTION3 {位置：绝对的;顶部：0;左：0;宽度：100％;高度：100％;}

Question

我正在尝试建立一个网站，用户可以在一系列网页之间垂直导航。基本上每个部分都占据整个屏幕，无论屏幕分辨率如何，底部都有一个按钮，可以向下滚动到下一个全屏div。关于如何处理这个的任何想法？按钮看起来像简单的java脚本，但我不太确定如何接近全屏divs

谢谢！

Answer 1

作为一种方法，你想要一次只在div上显示，所以你可能想看看各种JS滑块插件是如何工作的（WooThemes的Flexslider最强大和最灵活的一个）。 / p>

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

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

然后把你的内容放在那里。也就是说，我确实质疑这种方法的可用性。

Answer 2

包含网站所有可显示html的<body> div占用整个屏幕。

通过将div的height和width设置为100％，您可以确保它占用整个包含的div。

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

您可以使用this tool查看您的网站在不同桌面设备，平板电脑和移动设备屏幕上的显示效果。

Answer 3

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

将这些部分置于绝对位置
将它们与Top = 0对齐，左边= 0，宽度和高度为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>

你的css：

SECTION1，＃2节，＃SECTION3 {位置：绝对的;顶部：0;左：0;宽度：100％;高度：100％;}

你的Jquery脚本

$（“[id * = btnSec]”）。on（“click”，function（e）{ var sec = $（this）.attr（“id”）。split（“btnSec - ”）[1]; var nextSec = Number（sec）+1; $（ “＃集装箱”）儿童（）隐藏（）。 $（ “＃节” + nextSec）.show（）; }）

100％屏幕尺寸无论分辨率如何

3 个答案:

SECTION1，＃2节，＃SECTION3 {位置：绝对的;顶部：0;左：0;宽度：100％;高度：100％;}