100% Размер экрана Независимо от разрешения

Я пытаюсь создать веб-сайт, на котором пользователь перемещается по вертикали между серией разделов. В основном каждая секция занимает весь экран, независимо от разрешения экрана, и имеет кнопку внизу, которая будет прокручиваться до следующего полноэкранного div. любая идея о том, как подойти к этому? кнопки кажутся достаточно простыми java-скриптами, но я не совсем уверен, как подойти к полноэкранным divs100% Размер экрана Независимо от разрешения

спасибо!

источник

2013-06-19 nictoriousface

В качестве подхода вы хотите показывать только на div за раз, поэтому вам может понадобиться посмотреть, как работают различные плагины JS-слайдера (одним из самых надежных и гибких является Flexslider от WooThemes).

Вы хотите, чтобы убедиться, что все «слайд» в настоящее время виден имеет фиксированное положение, которое занимает весь экран:

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

, а затем просто положить ваше содержание там. Тем не менее, я сомневаюсь в удобстве использования такого подхода.

источник

2013-06-19 20:40:11

благодарит за помощь! Я сделаю это. Это была просьба моего начальника – nictoriousface

<body> div, содержащий весь отображаемый html для сайта, занимает весь экран.

Установив div height и width на 100%, вы можете убедиться в том, что он принимает всю содержащуюся в нем div.

Используя свойства высоты и ширины и устанавливая их в процентах, вы можете создавать divs и контент, которые занимают весь экран, независимо от его размера.

Вы можете использовать this tool, чтобы посмотреть, как выглядит ваш сайт на разных экранах рабочего стола, планшета и мобильного телефона.

источник

2013-06-19 20:43:11

'height: 100%' не всегда работает. Значение относится только к родительскому контейнеру. –

@ChrisFerdinandi right, я полагаю, что я накрыл это во второй строке «Установив высоту и ширину div на 100%, вы можете убедиться, что он занимает всю полноту своего содержащего div» –

@ChrisFerdinandi Я действительно думаю, что это по порядку для параметров 'width' и' height' для работы, родительский div должен иметь значение 'position'' relative' –

Если вы говорили о полноэкранном режиме, не знаете об этом. Но если вы говорите, занимающий всю ширину браузера и высоту, то необходимо попробовать

сделать эти разделы позиции абсолютного
Совместите их 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, # section2, # section3 {позицию: абсолютная; сверху: 0; слева: 0; ширина: 100%; высота: 100%;}

Ваш Jquery Script

$ ("[ID = btnSec]") на ("клик", функция (е) { . 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, # section2, # section3 {позицию: абсолютная; сверху: 0; слева: 0; ширина: 100%; высота: 100%;}

Смежные вопросы