CSS поплавок и высота вопроса

Question

Я пытаюсь создать страницу с двумя столбцами.Оба столбца имеют динамическую высоту, но я хочу, чтобы они оба расширяли страницу на 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              |
+------------------------+

Где второй столбец короче первого столбца.

Как у вас есть два соседних столбца, которые увеличивают высоту страницы?

edit

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

Answer 1

У меня есть решение для вас.Живой пример: 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 и уменьшил его до его основ, а также раскрасил, чтобы было очевидно, что он работает.

Answer 2

Вы можете попробовать сделать это следующим образом: http://jsfiddle.net/Xtw84/1/ (обратите внимание, что это было сделано в качестве примера к другому вопросу, так что это не совсем похоже на вашу структуру, но я уверен, что вы можете понять все остальное.)

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

Редактировать: иллюзия - это то, что вы делаете, чтобы она была http://jsfiddle.net/Xtw84/2/

Я ничего не делал, но изменил изображения на те, в которых есть этот стиль разделения.

Answer 3

Вы можете добавить следующий код после 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;
}

Answer 4

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 */
}

Answer 5

предположим, у вас есть больше тегов 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.

Answer 6

РЕДАКТИРОВАТЬ: используя только 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% влево, покроетЛевая половина внешнего контейнера.

Столбцы для контента.Так как они находятся внутри внутреннего контейнера, который находится внутри внешнего контейнера - расширение любого столбца будет толкать ОБА контейнеры вниз, поэтому не имеет значения, какой контент столбца длиннее - они всегда будут выглядеть одинаковыми по размеру.

Таким образом, код необходимо будет корректировать в соответствии с вашими потребностями внешнего вида (отступы, поля и т. Д.).Отрегулируйте ширину right / leftColumn для общего размера (но оба должны составлять <100%, чтобы соответствовать друг другу).Настройте свойство innerContainers 'right', чтобы переместить его влево и вправо, эффективно изменяя размер столбцов.</p>

Я абстрагировал это от здесь , за которым мне было трудно следить, но в нем есть более формальные описания того, как необходимо установить ширину / левое позиционирование для учета заполнения / поля и т. Д.

Другое (более простое) решение - использовать Искусственные столбцы