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％;}

相關問題