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

更正CSS中的height拼写错误，并使body成为 flexbox ：

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

然后添加此样式：

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

Updated Fiddle

Answer 2

您可以使用css flexbox规范。给你的身体元素这些样式：

body {
  display: flex;
  flex-flow: column;
}

在＃div1上添加此规则：

flex: 0 1 auto;

在你的#div2上添加：

flex: 1 1 auto;

也不要忘记更正html，身体选择器上的height拼写错误。

我建议你阅读一些关于flexbox规范的文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

更新了小提琴：https://jsfiddle.net/jv82z52g/6/

Answer 3

在你的div2 css中试试这个：

position: absolute;
background-color: yellow;    
bottom: 0;

删除div2-class中的高度。

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

3 个答案: