yarek yarek - 7 months ago 6
HTML Question

css3 : how to make div go up to bottom of page?

I have 2 divs:

<div id="div1">some div whose height may change</div>
<div id="div2">
this div should go up to bottom
<div>
<input id="chat" type="text" placeholder="stick to bottom of yellow div">
</div>
</div>


Css:

html,body {
heihgt:100%;
margin:0px;
padding:0px;
}

#div1{
height:60px;
background-color:red;
}
#div2{
position:relative;
background-color:yellow;
height: 100%;
}


https://jsfiddle.net/jv82z52g/

How to make div2 take the whole space up to bottom of the page ?

Answer

Correct the height typo in your CSS, and make body a flexbox:

html, body {
  height: 100%;
  display: flex;
  flex-direction: column;  //children should go down the page
}

Then add this style:

#div2 {
  flex: 1;  //take up remainder of space
}

Updated Fiddle

Comments