CSS float и высота вопроса
Я пытаюсь создать страницу с двумя столбцами. Оба столбца имеют динамическую высоту, но я хочу, чтобы они оба расширяли страницу на 100%.
Я имею в виду, если у вас есть страница
+------------------------+
| Header |
+------------------------+
| Col1 | Col2 |
| | |
| | |
| | |
+-------------+----------+
| footer |
+------------------------+
Я хочу, как вы видите выше обоих столбцов, чтобы расширить всю высоту страницы.
Сейчас у меня есть
<div id="main">
<div id="col1"></div>
<div id="col2"></div>
</div>
#col1 {float: left;}
#col2 {float: right;}
Проблема не в том, что я пытаюсь, единственный способ увеличить столбец - использовать статическое число.
#col2 {
float: right;}
height: 100px;
}
Это не работает, потому что контент динамический.
Я попытался изменить поплавки и установить очистители повсюду, но независимо от того, что я делаю, моя страница в конечном итоге выглядит так
+------------------------+
| Header |
+------------------------+
| Col1 | Col2 |
| | |
| | |
| +----------+
| | |
| | |
| | |
+-------------+----------+
| footer |
+------------------------+
Где второй столбец короче первого столбца.
Как у вас есть два соседних столбца, которые увеличивают высоту страницы?
редактировать
Я бросил и попробовал все предложения безрезультатно. Я хочу кое-что добавить. Если есть лучший способ сделать это без поплавков, я тоже готов. Например, относительное положение. единственная проблема заключается в том, что главное div должно быть сосредоточено в теле, которое я не могу заставить работать с абсолютами.
6 ответов
У меня есть решение для вас. Живой пример: http://jsfiddle.net/Qbdab/
HTML:
<div id="header">
</div>
<div class="colmask doublepage">
<div class="colleft">
<div class="col1">
</div>
<div class="col2">
</div>
</div>
</div>
<div id="footer">
</div>
CSS:
#header {
background: lightgreen;
clear:both;
float:left;
width:100%;
}
.colmask {
clear:both;
float:left;
width:100%;
overflow:hidden;
}
.colleft {
float:left;
width:100%;
position:relative;
}
.col1,.col2{
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
.doublepage {
background: lightblue; /* right column background colour */
}
.doublepage .colleft {
right:50%; /* right column width */
background: salmon; /* left column background colour */
}
.doublepage .col1 {
width:46%; /* left column content width (column width minus left and right padding) */
left:52%; /* right column width plus left column left padding */
}
.doublepage .col2 {
width:46%; /* right column content width (column width minus left and right padding) */
left:56%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */
}
#footer {
background: pink;
clear:both;
float:left;
width:100%;
}
Я использовал этот http://matthewjamestaylor.com/blog/perfect-2-column-double-page.htm и уменьшил его до его основ, а также раскрасил, чтобы было очевидно, что он работает.
html: добавьте class="col" в каждый столбец
#col1 {
background:lightyellow;
float:left;
}
#col2 {
background:lightred;
float:right;
}
.col {
width:300px;
min-height:300px; /* viewport fillsize height */
height:100%; /* autofill wrapper height, intend to stetch the shorter shrinked floated bloock */
}
Предположим, у вас есть больше тегов div на вашей странице. например,
HTML:
<div id="wrapper">
<div id="header">
<!-- some code here -->
</div><!-- end of header -->
<div id="body">
<div id="left">
<!-- some code here -->
</div>
<div id="right">
<!-- some code here -->
</div>
<div style="clear:both"></div>
</div><!-- end of body -->
<div id="footer">
<!-- some code here -->
</div>
</div><!-- end of wrapper -->
CSS:
#wrapper{
background:#eee;
width:970px;
margin:0px auto;
}
#wrapper #body{
height:auto;
}
#wrapper #body #left{
widht:70%;
float:left;
border:1px solid black;
}
#wrapper #body #right{
width:auto;
float:right;
border:1px solid black;
}
наличие вложенного div приведет к наследованию любых значений от их родительских div ов.
Вы можете попробовать сделать это следующим образом: http://jsfiddle.net/Xtw84/1/ (обратите внимание, что это было сделано в качестве примера к другому вопросу, так что это не совсем похоже на вашу структуру, но я уверен, что вы можете понять все остальное.)
Нечто подобное очень часто используется. Вы на самом деле не делаете колонки полной высоты, а просто создаете иллюзию этого, оборачивая все колонки во внешний элемент, который содержит фон.
Редактировать: иллюзия, это то, что вы делаете, чтобы быть http://jsfiddle.net/Xtw84/2/
Я ничего не делал, но изменил изображения на те, которые имеют этот стиль разделения в них.
Вы можете добавить следующий код после div, чтобы они оба очистились;
<br clear="all" />
<div id="main">
<div id="col1"></div>
<div id="col2"></div>
<br clear="all" />
</div>
Если вы хотите использовать класс CSS для очистки, вы можете сделать это;
<br class="clear" />
br.clear {
clear:both;
height:0px;
width:0px;
margin:0;
padding:0;
}
РЕДАКТИРОВАТЬ: используя только CSS, нет способа автоматически изменить размер контейнера содержимого - он увеличивается в высоту в зависимости от его содержимого - если только вы не позиционируете свои элементы абсолютно (что вам не нужно). Существует обходной путь CSS, который включает в себя использование контейнеров для фона и очистку столбцов для содержимого:
body {
margin:0;
padding:0;
border:0;
}
.outerContainer {
position:relative;
clear:both;
float:left;
width:100%;
overflow:hidden;
backround-color: RIGHT COLUMN COLOR;}
.innerContainer {
position:relative;
float:left;
width:100%;
right:50%; /* Offsets this by 50% - see explanation */
background-color: LEFT COLUMN COLOR;}
.leftColumn {
float:left;
position:relative;
left:50%;
width:50%;
}
.rightColumn {
float:left;
position:relative;
left:50%;
width:50%;
}
HTML будет структурирован:
div class="outerContainer"
div class="innerContainer"
div class="leftColumn" /div
div class="rightColumn" /div
/div
/div
Вот как это работает.
Фон OuterContainer будет покрыт фоном innerContainers - который мы сместили на 50% влево (говоря справа:50%) - таким образом, innerContainer, равный по ширине externalContainer, но переместившийся на 50% влево, покроет левую половину externalContainer.,
Столбцы для контента. Так как они находятся внутри внутреннего контейнера, который находится внутри внешнего контейнера - расширение любого столбца будет толкать ОБА контейнеры вниз, поэтому не имеет значения, какой столбец длиннее - они всегда будут выглядеть одинаковыми по размеру.
Таким образом, код будет нуждаться в корректировке в соответствии с вашими потребностями внешнего вида (отступы, поля и т. Д.). Отрегулируйте ширину right/leftColumn для общего размера (но оба должны составлять <100%, чтобы соответствовать друг другу). Настройте свойство innerContainers 'right', чтобы переместить его влево и вправо, эффективно изменяя размер столбцов.
Отсюда я абстрагировался, что было трудно для меня, но у меня есть более формальные описания того, как необходимо установить ширину / левое позиционирование для учета отступов / полей и т. Д.
Другое (более простое) решение - использовать искусственные столбцы.