css3:如何使div上到页面底部？

Question

我有2个div:

<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/

如何让div2将整个空间放到页面底部？

Answer 1

纠正heightCSS中的拼写错误,并制作body一个弹性箱:

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

然后添加此样式:

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

更新小提琴