Как достичь равных высот кросс-браузер divs

Я пытаюсь получить все div в контейнере, чтобы иметь ту же самую высоту, что и самый большой. В основном, чтобы все div были 100% -ной высотой внутри контейнера и не фиксировали высоту любого из div.Как достичь равных высот кросс-браузер divs

Ниже приведено то, что мне удалось придумать, но я не могу заставить его работать на всех браузерах. Есть ли способ достичь этого результата, но без использования jquery, javascript.

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

<!DOCTYPE html> 
<html> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 2</title> 
</head> 

<body> 

<div style="width: 500px; background-color: fuchsia; height: 400px; display: table"> 
    <div style="display: table-row; height: 100%"> 
     <div style="width: 50%; background-color: blue; float: left; height: 100%; display: table-cell">col 1</div> 
     <div style="width: 50%; background-color: green; float: left; height: 100%; display: table-cell">col 2<br /> 
      <br /> 
      <br /> 
      <br /> 

     </div> 
    </div> 
    <div style="display: table-row; height: 100%"> 
     <div style="width: 30%; background-color: blue; float: left; height: 100%; display: table-cell">col 1</div> 
     <div style="width: 30%; background-color: green; float: left; height: 100%; display: table-cell">col 2<br /> 
      <br /> 
      <br /> 
      <br /> 
      <br /> 
     </div> 
    </div> 
</div> 





</body> 
</html>

источник

2014-09-26 user3068032

Пожалуйста, избегайте использования встроенных стилей. [Зачем использовать CSS] (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Why_use_CSS) –

Это было просто для примера. – user3068032

Чтобы получить все дивы в появляются, как если бы они имели одинаковую высоту, вы можете использовать псевдо-элементы, чтобы поместить соответствующий фон позади каждый из дивы. Эти псевдоэлементы затем занимают высоту обертки-div, которая, в свою очередь, определяется высотой самого высокого div.

Смотрите полное описание техники на Tuts +: Solving the Equal Height Column Conundrum

источник

2014-09-26 16:35:47

Нет ли другого способа добиться этого без использования метода псевдоэлементов. – user3068032

Как достичь равных высот кросс-браузер divs

ответ

Смежные вопросы