-1

I want to extend the height of an element to the bottom of the height of its parent element. I couldn't find any way or solution to do it. Here is my code.

So, there is some content above the child element, and I want the child element to OCCUPY all the space that is below that. Basically: the rest of the parent element (to the bottom of its height).

I also tried making an awful visual display of the height of the child element should be extended - https://i.stack.imgur.com/wSFRW.png (the area colored in red should be its new height).

Currently, it only has its own height with padding that I added in CSS and its element. 

.parent {
  background: #232323;
  height: 500px;
}

h1 {
  color: white
}

.child {
  padding: 50px;
  border: 3px solid red;
}
<div class="parent">
  <h1>*Some other content*</h1>


  <div class="child">
    <h1>*The content of the child element*</h1>
  </div>
</div>
Alexander
  • 307
  • 3
  • 15
  • https://www.google.com/search?q=fill+remaining+height+of+parent+site:stackoverflow.com&sa=X&ved=2ahUKEwjN846Q7LLcAhWEJ8AKHeJnA-cQrQIoBDAAegQIAhAP&biw=1600&bih=745 – Temani Afif Jul 22 '18 at 13:47

1 Answers1

2

You can do this easily with CSS Grid

.parent {
  background: #232323;
  height: 500px;
  display: grid;
  grid-template-rows: auto 1fr;
}

h1 {
  color: white
}

.child {
  padding: 50px;
  border: 3px solid red;
}
 <div class="parent">
  <h1>*Some other content*</h1>

  <div class="child">
    <h1>*The content of the child element*</h1>
  </div>
</div>
Armin Ayari
  • 609
  • 3
  • 8
  • Worked fine. Thanks. Also, if you are generous enough, could you tell me what did you do to fix this briefly? – Alexander Jul 22 '18 at 13:53
  • @LeqsoBezarashvili I a created grid with CSS Grid that has 2 rows: the height of the first row is auto so with the height of the first child the height of this row will increase and with 1fr I gave the rest of the height of parent element to second child You can learn more about CSS Grid from this tutorial: https://css-tricks.com/snippets/css/complete-guide-grid/ – Armin Ayari Jul 22 '18 at 13:59