Html 我有两个div在另一个（垂直）中，我想要第一个固定高度，第二个固定高度

我的情况如下：

HTML:

我希望第一个div有固定的高度，第二个div有父div的其余部分，但不告诉父div一个特定的高度

---

jsiddle举例：

如果

html

和

body

具有

高度：100%

，则内部div没有任何填充。试着这样做：

html, body{
  height: 100%;
}

#parent {
  display:flex;
  flex-direction:column;
  height:100%;
}
#leftdiv {
  height: 50px;
  flex: 0 0 50px;
  background:blue;
}
#rightdiv {
  flex: 1 1 100%;
  background: red;
}

---

演示：

“我希望第一个div具有固定的高度，第二个div具有父div的其余部分，但不告诉父div一个特定的高度。”-那么在这里，究竟应该如何确定父div的高度？您在示例中使用了

100%

，但这并不能从这里开始，因为父元素没有明确的高度，这是儿童身高（以百分比表示）的一个要求。您是否正在寻找类似

height:100vh此处，使父对象填充视口？
#parent {
  display:flex;
  flex-direction:column;
  height:100%;
}
#leftdiv {
  height: 50px;
  flex: 0 0 auto;
  background:blue;
}
#rightdiv {
  flex: 1 1 100%;
  background: red;
}

html, body{
  height: 100%;
}

#parent {
  display:flex;
  flex-direction:column;
  height:100%;
}
#leftdiv {
  height: 50px;
  flex: 0 0 50px;
  background:blue;
}
#rightdiv {
  flex: 1 1 100%;
  background: red;
}