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

我正在尝试制作一个网站，其中用户在一系列部分之间垂直导航。基本上每个部分占用整个屏幕，而不管屏幕分辨率如何，并且底部有一个按钮，可以向下滚动到下一个全屏div。任何想法如何处理这个？按钮看起来像是足够简单的Java脚本，但我不太清楚如何接近全屏divs100％屏幕尺寸无论分辨率如何

谢谢！

来源

2013-06-19 nictoriousface

作为一种方法，你会希望在时间上格，只显示，所以你可能想看看如何将各种JS滑块插件工作（最强大和最灵活的是的WooThemes Flexslider之一）。

你要确保，无论“滑”是当前可见具有占据整个屏幕固定的位置：

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

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

来源

2013-06-19 20:40:11

感谢您的帮助！我会给这个镜头。这是我的老板的请求 – nictoriousface

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

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

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

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

来源

2013-06-19 20:43:11

'height：100％'并不总是有效。该值仅相对于父容器。 –

@ChrisFerdinandi正确的，我相信我所覆盖，在第二行“通过一个div的高度和宽度设置为100％，可以确保它占用了其包含分区的全部” –

@ChrisFerdinandi我认为，虽然，为了为了使百分比“width”和“height”设置起作用，父div必须具有“relative”的“位置”值。 –

如果您在谈论全屏窗口，不确定。但是，如果你是在谈论占据整个浏览器的宽度和高度则必须设法

让这些部分的位置绝对
它们对齐顶部= 0，left = 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]”）上（ “点击”，函数（E）{ 。 var sec = $（this）.attr（“id”）。分裂（ “btnSec - ”）[1]; var nextSec = Number（sec）+1; （“＃container”）。children（）。hide（）; $（“＃section”+ nextSec）.show（）; }）

来源

2013-06-19 20:49:18

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

回答

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

相关问题