0

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

谢谢！

4

3 回答 3

0

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

通过将 div 的heightand设置width为 100%，您可以确保它占据其包含的所有 div。

使用 height 和 width 属性并将它们设置为百分比，您可以创建占据整个屏幕的 div 和内容，无论其大小。

您可以使用此工具查看您的网站在不同的台式机、平板电脑和移动设备屏幕上的外观。

于 2013-06-19T20:43:11.813 回答
0

如果您在谈论全屏窗口，则不确定。但是如果你说的是占据整个浏览器的宽度和高度那么一定要试试

  1. 使这些部分位置绝对
  2. 将它们与 Top=0 和 left= 0 对齐，宽度和高度为 100%

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

    • 确保这些部分的父元素没有相对定位，否则这将失败。
 <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：

第 1 节，#第 2 节，#第 3 节{位置：绝对；上：0；左：0；宽度：100%；高度：100%；}

你的 Jquery 脚本

$("[id*=btnSec]").on("click", function(e){ var sec = $(this).attr("id").split("btnSec-")[1]; var nextSec = Number(sec)+1; $("#container").children().hide(); $("#section"+nextSec).show(); })

于 2013-06-19T20:49:18.607 回答
0

作为一种方法，您一次只希望在 div 上显示，因此您可能想看看各种 JS 滑块插件是如何工作的（最强大和灵活的插件之一是 WooThemes 的 Flexslider）。

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

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

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

于 2013-06-19T20:40:11.530 回答