Dynamic height based on content above

Question

I want to dynamically adjust the height of DIV container for fill the remaining space between the bottom of the page and the content above.

I've tried to use height:100% or height:calc(100%- XX); but the height of the segment above is not defined. How can I resize the container below?

So, in this pen, I want to remove the scrollbar and show the content in the entire page.

<h1>Ciao</h1>
<section class="container">
   <div>here
   </div>
</section>

https://codepen.io/anon/pen/NyPqBv

The CodePen contents are not the same as in your question – Raptor Jan 30 '18 at 09:00 — Raptor, Jan 30 '18 at 09:00
@Raptor https://codepen.io/anon/pen/NyPqBv – user6542453 Jan 30 '18 at 09:06 — user6542453, Jan 30 '18 at 09:06

Yashwanth M · Answer 1 · 2018-01-30T10:30:28.973

To remove scroll and fill the page,

just add postion: fixed; in your css as required.

I made some minor changes in css to replicate what you needed.

https://codepen.io/anon/pen/oEgbdy

.container {
  position: fixed;
}
.bg{
  height: 100%;
  background: hsla(100, 50%, 60%, 1);
}
html, body {
  height: 100%;
}

<div class="container bg">
 <h1 class="" style="background-color:white">Ciao</h1>
<section class="">
  <div>here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here here 
  </div>
</section></div>

Dynamic height based on content above

1 Answers1