-1

There is container:

<div class="container">
   <div class="block1"></div>
   <div class="block2"></div>
</div>

Block class="container" has height of screen height.

How to make the same height for block1, block2? so that they occupy the entire height of the parent?

I have tried flex

POV
  • 11,293
  • 34
  • 107
  • 201
  • https://stackoverflow.com/questions/2997767/how-do-i-keep-two-side-by-side-divs-the-same-height – Mustafa Oct 18 '19 at 19:09
  • 2
    *I have tried flex* Can you show us your attempt ? I can't think of a much more easier way to achieve this than flex – Rainbow Oct 18 '19 at 19:17

2 Answers2

2

grid can help you here without even setting an height which can be optionnal , mind box-sizing if height, borders and paddings are involved:

.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);/* the keyword for the value : 1fr */
}

.container>div {
  border: solid;
}
<div class="container">
  <div class="block1">give<br>me<br>some<br>heights</div>
  <div class="block2"></div>
</div>

usefull link to know more about it https://css-tricks.com/snippets/css/complete-guide-grid/

flex would be for te browser's height:

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container>div {
  flex: 1;
  border: solid;
  margin: 2px;
  /* possible*/
}


/* reset */

body {
  margin: 0;
  height: 100vh;
}
<div class="container">
  <div class="block1"></div>
  <div class="block2"></div>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
1

You can use flex to get this done. You could also use float and set the height of the blocks to 100% and the widths of them to 50%.

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  border: 4px red solid;
}

.block1, .block2 {
  height: 50%;
}

.block1 {
  border: 4px green solid;
}

.block2 {
  border: 4px blue solid;
}
<div class="container">
   <div class="block1"></div>
   <div class="block2"></div>
</div>
Brett East
  • 4,022
  • 2
  • 20
  • 31