How to make an HTML div occupy the rest of the available height

Question

I am working on a web application where I want the content to fill the height of the entire screen. How to make the div (other-child) fills its parent automatically without doing calculation on its height.

html {
height:100%;
}

body{
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
 }

#parent {
height:100%;
}

#child {
height:50px;
background:yellow;
}

#other-child{
background:red;
/* height: 100% */
}

<html>
<body>
  <div id="parent">
    <div id="child" >fixed height</div>
    <div id="other-child">occupy the rest</div>
  </div>
</body>
</html>

score 0 · Answer 1 · answered Feb 01 '22 at 12:59

Please checkout this solution, parent will be display:flex and the child which will grow can be done using flex-grow: 1

html {
height:100%;
}

body{
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
 }

#parent {
height:100%;
width:100%;
display: flex;
flex-grow: 1;
flex-direction: column;
}

#child {
height:50px;
background:yellow;
}

#other-child{
background:red;
flex-grow: 1;
/* height: 100% */
}

<html>
<body>
  <div id="parent">
    <div id="child" >fixed height</div>
    <div id="other-child">occupy the rest</div>
  </div>
</body>
</html>

Youssouf Oumar · Accepted Answer · 2022-02-01T13:08:42.693

You could use css grid on #parent and control everything from there, and it will be as simple as this :

html {
height:100%;
}

body{
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
 }

#parent {
 min-height: 100vh;
 display:grid;
 grid-template-rows: 50px 1fr
}

#child {

background:yellow;
}

#other-child{
background:red;
 
}

<html>
<body>
  <div id="parent">
    <div id="child" >fixed height</div>
    <div id="other-child">occupy the rest</div>
  </div>
</body>
</html>

score 0 · Answer 3 · answered Feb 01 '22 at 13:29

Try this...

html,
body {
  height: 100%;
  margin: 0;
}

#parent {
  display: flex;
  flex-flow: column;
  height: 100%;
}

#child {
  flex: 0 1 auto;
  background: red;
}

#other-child {
  flex: 1 1 auto;
  background: yellow;
}

<div id="parent">
    <div id="child" >fixed height</div>
    <div id="other-child">occupy the rest</div>
  </div>

How to make an HTML div occupy the rest of the available height

3 Answers3