HTML/CSS - расположение нескольких элементов DIV рядом, каждый div равен 100% ширины / высоты браузера
Я не могу понять это, и это, вероятно, довольно просто. У меня есть несколько элементов DIV, которые мне нужно разместить рядом (без полей между ними), и каждый div должен иметь ширину набора, равную 100% ширины браузера, и минимальную высоту, равную 100% ширины браузера.
Как я уже сказал, я уверен, что есть быстрый и легкий трюк в этом, я просто не мог найти много в моем исследовании. Спасибо много!
Обновление: это, кажется, работает: http://pastebin.com/kuQyfwuG
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, чтобы сделать их ширину равной ширине окна / браузера.