HTML/CSS - расположение нескольких элементов DIV рядом, каждый div равен 100% ширины / высоты браузера

Question

Я не могу понять это, и это, вероятно, довольно просто. У меня есть несколько элементов DIV, которые мне нужно разместить рядом (без полей между ними), и каждый div должен иметь ширину набора, равную 100% ширины браузера, и минимальную высоту, равную 100% ширины браузера.

Как я уже сказал, я уверен, что есть быстрый и легкий трюк в этом, я просто не мог найти много в моем исследовании. Спасибо много!

Обновление: это, кажется, работает: http://pastebin.com/kuQyfwuG

Answer 1

Может быть, вы можете обернуть все ваши div в контейнер div, ширина которого намного больше ширины браузера (или, по крайней мере, общая ширина всех ваших div, лежащих рядом):

HTML

<div id="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

CSS

body {
  overflow: hidden;
}

#container {
  width: 10000px;
  height: 100%;
}

.element {
  min-height: 100%;
  ...
}

JQuery

$('.element').css('width', window.innerWidth);

body было дано имущество overflow: hidden; так что горизонтальные полосы прокрутки не будут отображаться из-за #containerразмер. И так как давая .element ширина 100% сделает его таким же широким, как #container элемент, вы можете добавить немного jQuery, чтобы сделать их ширину равной ширине окна / браузера.