Как иметь две поддивы одинаковой высоты как друг друга

Question

Мне нужно сделать две одинаковые высоты друг на друга (используя CSS, если возможно), но каждый из них находится под столбцом сетки.

• Я не могу подкрасить сетки колонн, поскольку они используют отступы, чтобы создать желобов и я бы не белого пространства между затемненными контейнерами, если я подкрасить фон.
• Это сетка, основанная на%, поэтому добавление поля как к столбцам занимает более 100%.

<div class="grid-row"> 
 
     <div class="grid-column-half"> 
 
     <div class="tinted-container"> 
 
      <p>Taller</p> 
 
      <p>column</p> 
 
      <p>on</p> 
 
      <p>left</p> 
 
     </div> 
 
     </div> 
 

 
     <div class="grid-column-half"> 
 
     <div class="tinted-container"> 
 
      <p>This container should be the same height as the other one.</p> 
 
     </div> 
 
     </div> 
 
    </div>

Как я могу сделать контейнеры такой же высоты?

Answer 1

Flexbox можно сделать:

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.grid-row { 
 
    display: flex; 
 
} 
 
.grid-column-half { 
 
    border: 1px solid grey; 
 
    width: 50%; 
 
    padding: 10px 
 
} 
 
.tinted-container { 
 
    height: 100%; 
 
    background: pink; 
 
}

<div class="grid-row"> 
 
    <div class="grid-column-half"> 
 
    <div class="tinted-container"> 
 
     <p>Taller</p> 
 
     <p>column</p> 
 
     <p>on</p> 
 
     <p>left</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="grid-column-half"> 
 
    <div class="tinted-container"> 
 
     <p>This container should be the same height as the other one.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

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

Причина, по которой вам нужно сделать это, заключается в том, что divs не все заданы как одна конкретная высота или ширина, это зависит от того, что содержится в них, и от того, что они содержатся. С простым примером, подобным этому, просто устанавливая его на статическую высоту 200 пикселей и помещая границу, вы можете видеть, что divs имеют одинаковую высоту. Без объявления высоты оба divs были бы разной высотой, и вы могли бы играть с этим на скрипке.

Чтобы увидеть эту работу, проверьте скрипку здесь: https://jsfiddle.net/john_h/rnnjx28m/

Вы можете добавить этот CSS, чтобы установить высоту вашего класса:

.tinted-container { 
    height: 200px; 
    border: 1px solid black; 
} 

.grid-column-half { 
    float: left; 
    display: inline-block; 
} 

И ваш HTML может остаться один и тот же:

<div class="grid-row"> 
     <div class="grid-column-half"> 
     <div class="tinted-container"> 
      <p>Taller</p> 
      <p>column</p> 
      <p>on</p> 
      <p>left</p> 
     </div> 
     </div> 

     <div class="grid-column-half"> 
     <div class="tinted-container"> 
      <p>This container should be the same height as the other one.</p> 
     </div> 
     </div> 
    </div> 

Вам нужно будет поиграть с интервалом, чтобы получить ваш предполагаемый вид!