100%屏幕大小，无论分辨率

100% Screen Size Regardless of Resolution

本文关键字：分辨率 屏幕 100%      更新时间：2023-09-26

我试图使一个网站的用户之间的一系列部分之间垂直导航。基本上，无论屏幕分辨率如何，每个部分都占据了整个屏幕，底部有一个按钮，可以向下滚动到下一个全屏部分。按钮似乎足够简单的Java脚本，但我不太确定如何接近全屏div

谢谢!

作为一种方法，你想一次只显示一个div，所以你可能想看看各种JS滑块插件是如何工作的(其中最强大和灵活的是WooThemes的Flexslider)。

你要确保当前可见的"slide"有一个固定的位置，占据整个屏幕:

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

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

如果你说的是全屏窗口，我不确定。但是如果你说的是占用整个浏览器的宽度和高度那么必须尝试

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

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

    • 确保这些section的父元素没有相对定位，否则会失败。
 <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 # section2 # section3{:绝对;:0;左:0;宽度:100%;高度:100%;}

Jquery脚本

$("[id * = btnSec]")。("点击",函数(e) {var sec = $(this).attr("id").split("btnSec-")[1];var nextSec = Number(sec)+1;$(" #容器")定格()hide ();$(" #节"+ nextSec),告诉();})

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

通过将div的height和width设置为100%，您可以确保它占用其包含的div的全部。

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

您可以使用此工具查看您的网站在不同的桌面，平板电脑和移动屏幕上的外观。

相关文章：