DIV to the full height of the parent?

Question

css

Is there really no human solution to this issue to this day? Page in several screens, you need two blocks for the full height. height:100% gives the screen height of the device, not the parent. Do not make tables now because of this ..

Answer 1

.parent {
  position: relative;
}
.child {
  position: absolute; 
  left:0;
  right:0;
  top:0;
  bottom:0;
}

Answer 2

In fact, the height property specified in % only works if a height is specified for the outer block. Or for elements with absolute positioning. In this case, you need to specify top 0 and left 0

Answer 3

flex-box
css-tricks.com/boxes-fill-height-dont-squish

Answer 4

Responsive html height :

<div class = "fullpage">
     <div id = "screen_1">
     </div>

     <div id = "screen_2">
    </div>
</div>

css:

.fullpage {
  position: relative;
  margin: 0px;
  padding: 0px;
  max-width: 100%;
  min-height: 200%;
  max-height: 200%;
  overflow: hidden;
}
#screen_1, #screen_2 {
  position: absolute;
  left: 0px;

  width: 100%;
  height: 50%;

  margin: 0px;
  padding: 0px;
}
  #screen_1 {
    top: 0px;
  }
  #screen_2 {
    top: 50%;
  }

fullpage - parent block with a height of 2 screens (200%), which contains 2 child blocks with a height of 1 screen each (50% of fullpage). The first one has top: 0px and 50% height, the second one has top: 50% (because it goes back to back after the first block). Thus, we can set n number of blocks-screens with height (100% / n) and point top for each
for (i = 0; i < n; i++) {
top[i] = (100% / n)*i;
}
:)))
Yes, and modern browsers also support such a cool adaptive thing as vh and vw, which are the dimensions of the visible area of ​​the browser window in height and width, respectively:

.fullpage {
     height: 100vh;      /*--- 100% от высоты видимой области страницы в браузере ---*/
     width: 100vw;     /*--- 100% от ширины ---*/
}

BUT! This thing is not supported on different mobile browsers and old versions of regular browsers, so this thing is not so cool yet :(

Answer 5

Actually, div { height: 100%; } gives just the height of the parent. But why you have the height of the parent is equal to the height of the device screen, this is another question.

Answer 6

javascript get the height of the parent and set it to the child

Answer 7

Yes, and modern browsers also support such a cool adaptive thing as vh and vw, which is the size of the visible area of ​​​​the browser window in height and width, respectively:

.fullpage {
     height: 100vh;      /*--- 100% от высоты видимой области страницы в браузере ---*/
     width: 100vw;     /*--- 100% от ширины ---*/
}

BUT! This thing is not supported on different mobile browsers and old versions of regular browsers, so this thing is not so cool yet :(
This is really really cool stuff! How to find out in which browsers it does not work?)

Answer 8

To manage the blocks, I made a library. Few people need it. Link to my github https://github.com/xakplant/stickjaw

Answer 9

Try setting the page to display: flex and the child blocks to align-self: stretch (+ flex-shrink: 0 if you don't want the blocks to shrink) and don't forget to set the width of the child elements. For me this way worked.