Установите равную высоту для группы divs

Question

В разделе, у меня есть 4 divs. Первый div, который теперь перемещается влево, имеет ширину и высоту в пикселях. Я хочу, чтобы высота была DYNAMICALLY сгенерирована на основе высоты другого div. Я совсем застрял. Вот мой jsfiddle: https://jsfiddle.net/ksaluja/62o7ydan/ Спасибо!

<section> 
<div class="attempt"> 

</div> 
<div> 
    <ul id="menu"> 
     <li><a style="background:#3F4E64" href="/html/default.asp">Button1</a></li> 
     <li><a style="background:#788291">Button2</a></li> 
    </ul> 
</div> 

<div> 
    <H2>TITLE</H2> 
    <p> 
     BADKADA 
    </p> 
    <p> 
     Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium 
    </p> 
    <p> 
     Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium 
    </p> 

    <p> 
     Fusce luctus Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium fring. 
    </p> 
</div> 

<div> 
    <H2>TITLE2</H2> 
    <p> 
     BADKADA 
    </p> 
    <p> 
     Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium 
    </p> 
    <p> 
     Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium 
    </p> 

    <p> 
     Fusce luctus Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium fring. 
    </p> 
</div> 
</section> 

CSS

.attempt { 
    float:left; 
    width: 15px; 
    height: 1290px; 
    background: #3F4E64; 
    margin-right:20px; 
} 

Answer 1

Вы можете достичь этого макета с помощью CSS flexbox.

Содержит section гибкий контейнер, который преобразует divs в гибкие элементы.

Но заверните последние три divs в вложенном контейнере flex. Теперь у section есть два предмета гибкости, бок о бок, и общий уровень равной. Никаких поплавков или заявленных высот не требуется. Каждая колонка будет отслеживать другую. Столбец с более высоким контентом устанавливает высоту для обоих.

CSS

.outer-flex-container { 
    display: flex; 
} 

.attempt { 
    width: 15px; 
    background: #3F4E64; 
    margin-right: 20px; 
} 

HTML

<section class="outer-flex-container"> 

    <div class="attempt"></div><!-- flex item #1 --> 

    <section class="inner-flex-container"><!-- flex item #2 --> 
     <div> 
      <ul id="menu"> 
       <li><a style="background:#3F4E64" href="/html/default.asp">Button1</a></li> 
       <li><a style="background:#788291">Button2</a></li> 
      </ul> 
     </div> 

     <div> 
      <H2>TITLE</H2> 
      <p>BADKADA</p> 
      <p>Fusce luctus ipsum in dui accumsan...</p> 
      <p>Fusce luctus ipsum in dui accumsan...</p> 
      <p>Fusce luctus Fusce luctus ipsum in...</p> 
     </div> 

     <div> 
      <H2>TITLE</H2> 
      <p>BADKADA</p> 
      <p>Fusce luctus ipsum in dui accumsan...</p> 
      <p>Fusce luctus ipsum in dui accumsan...</p> 
      <p>Fusce luctus Fusce luctus ipsum in...</p> 
     </div> 
    </section><!-- END .inner-flex-container --> 

</section><!-- END .outer-flex-container --> 

Revised Demo

---

Узнайте больше о равных колонок по высоте с Flexbox здесь:

• Here's how to achieve equal height columns with flexbox
• How to disable equal height columns in Flexbox

---

Обратите внимание, что Flexbox поддерживается всеми основными браузерами, except IE 8 & 9. Некоторые недавние версии браузера, такие как Safari 8 и IE10, требуют vendor prefixes. Чтобы быстро добавить все префиксы, которые вам нужны, используйте Autoprefixer. Подробная информация о совместимости браузера в this answer.

Answer 2

If you're able to use them, гибкие коробки делают вещи намного легче на вас. Вы можете сделать display: flex и перенести вещи для правого столбца в один и тот же контейнер. CSS будет что-то вроде этого:

section { 
    display: flex; 
} 

.attempt { 
    width: 15px; 
    background: #3F4E64; 
    margin-right:20px; 
} 

... и HTML:

<section> 
    <div class="attempt">...</div> 
    <div>The rest of the content...</div> 
</section> 

Вот demonstration JSFiddle.

Answer 3

Вы можете достичь этого путем установки display:table к section и display:table-cell к двум Div внутри него (т.е. .attempts сНа и его братья и сестры). Используя это, вам не нужно устанавливать float или height.

DEMO

CSS:

section { 
    display: table; 
} 
.attempt { 
    display:table-cell; 
    width: 15px;  
    background: #3F4E64; 
    margin-right:20px; 
} 
section div{ 
    display:table-cell; 
}