Обе колонки одинаковой высоты, как самая глубокая колонна?

Question

Если у меня есть макет Div так:

<div id="stretchyheader"></div> 
<div id="fixedwidthwide"><div> 
<div id="fixednarrow></div> 
<div id="footer"></div> 

Что делает что-то вроде этого:

----------------------------------------------------- 
|   stretchyheader       | 
----------------------------------------------------- 
     |      |    | 
     |      |    | 
     | fixedwidthwide | fixednarrow | 
     |      |    | 
     |      |    | 
     |      | -------------- 
     |      |    
     |      |    
     |      |  patterned   
     |      |  background 
     ----------------------- 
        - footer - 

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

Answer 1

Очень простой, обычный способ сделать это с помощью Faux Columns.

Вы бы иметь структуру, которая выглядела примерно так:

<div id="stretchyheader"></div> 
<div id="container"> 
    <div id="fixedwidthwide"></div> 
    <div id="fixednarrow></div> 
</div> 
<div id="footer"></div> 

И вы на самом деле применить фоновое изображение #container добавить любые цвета фона, границы и т.д. для каждого из 2-х колонок.

Есть CSS методы, чтобы сделать это, не притворяется, но они гораздо сложнее:

• http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
• http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-pixels.htm
• http://www.socialgeek.be/blog/read/flexible-equal-height-columns

Answer 2

адаптировано из here:

Создать контейнер вокруг двух фиксированных столбцов, и имеют CSS-то вроде этого:

#container { 
    float:left; 
    width:[sum of the two columns width]; 
} 
#fixedwidthwide { 
    float:left; 
    width:[whatever]; 
} 
#fixednarrow { 
    float:left; 
    width:[whatever]; 
} 

Обратите внимание, что это необходимо только в том случае, если столбцы необходимость быть одинаковой высоты по какой-то причине. Если нет, вы можете просто следовать предложению филфрео и использовать столбцы faux.

Answer 3

Есть целый ряд решений этой проблемы, в том числе OneTrueLayout Техника, Поддельный Колонны Техника и CSS табличный дисплей Техника.

Лучшее решение в равной степени высоты изд столбцов является CSS Tabular Display Technique, что означает использовать дисплей: таблица функции. Он работает для Firefox 2+, Safari 3+, Opera 9+ и IE8.

Код для CSS табличный Display:

HTML-

<div id="container"> 
    <div id="rowWraper" class="row"> 
      <div id="col1" class="col"> 
       Column 1<br />Lorem ipsum<br />ipsum lorem 
      </div> 
      <div id="col2" class="col"> 
       Column 2<br />Eco cologna duo est! 
      </div> 
      <div id="col3" class="col"> 
       Column 3 
      </div> 
     </div> 
</div> 

CSS-

<style> 
#container{ 
    display:table; 
    background-color:#CCC; 
    margin:0 auto; 
} 

.row{ 
    display:table-row; 
} 

.col{ 
    display: table-cell; 
} 

#col1{ 
    background-color:#0CC; 
    width:200px; 
} 

#col2{ 
    background-color:#9F9; 
    width:300px; 
} 

#col3{ 
    background-color:#699; 
    width:200px; 
} 
</style> 

Даже если есть проблема с авто- расширение ширины таблицы-ячейки может легко разрешить, вставив другой div с табличной ячейкой и придав ему фиксированную ширину. Во всяком случае, чрезмерное расширение ширины происходит в случае использования чрезвычайно длинных слов (что я сомневаюсь, что кто-то использовал бы, скажем, длинное слово длиной 600 пикселей), или какая-то ширина div, ширина которой больше ширины таблицы.

Faux Column Technique может быть решением этой проблемы, но у него есть некоторые недостатки, такие как вы должны изменить размер фонового изображения, если вы хотите изменить размер столбцов, а также не изящное решение.

OneTrueLayout Technique состоит из создания нижней части крайней большой высоты и ее вырезания путем приведения реального положения границы к «нормальному логическому положению» путем применения отрицательного края-основания того же огромного значения и скрыть степень, созданная дополнением с переполнением: скрытая, применяемая к конвейеру содержимого. Упрощенный пример будет:

HTML-файл:

<html><head> 
<style> 
.wraper{ 
    background-color:#CCC; 
    overflow:hidden; 
} 

.floatLeft{ 
    float:left; 
} 

.block{ 
    padding-bottom:30000px; 
    margin-bottom:-30000px; 
    width:100px; 
    background-color:#06F; 
    border:#000 1px solid; 
} 
</style> 
</head> 
<body> 
    <div class="wraper"> 
    <div class="block floatLeft">first col</div> 
     <div class="block floatLeft"> 
       Second col<br />Break Line 
     </div> 
    <div class="block floatLeft">Third col</div> 
</div> 
</body> 
</html> 

На моем взгляде невыполненная высоты 100% в автоматизированном контейнере высоты является одним из основных недостатков и W3C следует рассмотреть вопрос о пересмотре этого атрибута.

Другие ресурсы: link1, link2, link3, link4, link5 (important)