dom / css: поместите несколько контейнеров на 100% в контейнер больше, чем область просмотра (100%) - PullRequest
Новая
       11

dom / css: поместите несколько контейнеров на 100% в контейнер больше, чем область просмотра (100%)

0 голосов
/ 03 апреля 2012

Я рассматриваю базовый макет DOM, который позволяет мне поместить пару контейнеров, которые установлены в width:100%; height:100%;, в ряд, чтобы я мог позволить пользователю прокручивать между ними:

example

Итак, у меня есть РАМКА, установленная на width:100%; height:100%; overflow:scroll;, и включенный КОНТЕЙНЕР, например, width:20000px; height:100%;.Теперь я могу прокручивать обширный ландшафт синего КОНТЕЙНЕРА, где я обычно располагал бы элементы, расположенные в нем, и мог бы прокручивать до.Все идет нормально.Теперь у меня есть несколько PAGES, которым нужно width:100%; height:100%; из-за перекрывающегося содержимого.

Моя проблема заключается в том, что плавающий контейнер PAGES будет охватывать все 20000px, когда я установлю его на width:100%;, так как это 100% очевидно ...

Как бы вы отобразили несколько контейнеров в строке, которые бы все были такими же широкими и такими же высокими, как и окно просмотра браузера, возможно, без каких-либо JS-хаков ...

Ответы [ 2 ]

1 голос
/ 03 апреля 2012 
<!DOCTYPE html>

<html>
<head>
<style>
* {margin:0; padding:0;}

html, body {height: 100%; }

#frame {height: 100%; width: 100%; background: gray;}

#container {height: 100%; width: 300%; display: table;}

.page {display: table-cell; outline: 2px solid red; outline-offset: -2px;}

</style>
</head>
<body>
<div id=frame>
  <div id=container>
    <div class=page>
page1
    </div>
    <div class=page>
page2
    </div>
    <div class=page>
page3
    </div>
  </div>
</div>
</body>
</html>

Не совсем то, что вы ищете, но, возможно, отправная точка для последних браузеров. Обратите внимание, что таблица может переполнить свой контейнер, не влияя на ее ширину (серая), вызывая полосу прокрутки в html / body. Ячейки таблицы делят ширину одинаково. Но вам нужно знать количество страниц.

1 голос
/ 03 апреля 2012

Технически, вы можете просто использовать дроби для страниц, например width:33%;, если есть 3 страницы, 25%, если есть 4 страницы и т. Д. Для того, чтобы это выглядело чистым в разных браузерах и размерах окон,маленький jQuery - единственный правильный способ справиться с этим: 

$(function(){
    $('#first_page,#second_page,#third_page').css('width',$(window).width());
});

jQuery width () документация

...