Html 使用CSS将页面高度划分为两个块

我有两个块：header

.AccountInfo

和content

.DebitsAndCredits

。它们都应该划分页面的高度，并且

。DebitsAndCredits

应该是可滚动的。滚动控件应该在

.DebitsAndCredits

块内部可见，我尝试这样做，但我不知道没有JS如何做到这一点，但我认为仅使用CSS是可能的

我在这里发布了我的示例：（很抱歉，这里的HTML不干净，我只是复制了我的react应用程序编译后的HTML）

我的问题是：

.DebitsAndCredits {
  padding-top: 20px;
  padding-bottom: 20px;
  overflow: scroll;
  height: 300px;
}

---

我应该这样做，而不是

高度：300px。此块的高度应该从
.AccountInfo
的底部到页面的底部。
您可以使用Flexbox进行此操作（请参见CSS中的注释）


正文{
保证金：0；
字体系列：无衬线；
}
.App{
显示：flex；/*已添加*/
弯曲方向：柱；/*已添加-垂直堆叠*/
高度：100vh；/*增加-全高*/
最大宽度：40雷姆；
左边距：自动；
右边距：自动；
}
.借方和贷方{
弹性：10；/*增加-保持半高*/
填充顶部：20px；
垫底：20px；
溢出：自动；
}
.DebitsAndCreditsItem{
填充：20px；
}
.DebitsAndCreditsItem名称{
字体大小：大号；
}
.AccountInfo{
弹性：10；/*增加-保持半高*/
溢出：隐藏；/*内容超过元素时隐藏*/
填充：20px；
边框底部：1px实心；
}
.AccountInfo名称{
字体大小：大号；
}
.文本静音{
颜色：#636c72；
}
.文本成功{
颜色：#5cb85c；
}

JS-Bin
乔·多伊


伊班：
HTB0001234567


余额：
3133.56


货币：
欧元


温迪
,
+10.5就餐者2016年1月10日下午12:20

丹尼
,
+10.5就餐者2016年1月10日下午12:14

乔的比萨饼
,
-31.5134678943.88
2016年1月10日凌晨1:23

北风工业
,
+2310.7 2016年1月9日下午7:00工资

咖啡和蛋糕
,
-2.5468832.99
2016年1月8日上午11:14

阿尔伯特·海因
,
-76.65489923982.45
2016年1月7日晚上10:30

鞋和夹克
,
-89567222.67
2016年1月7日晚上9:29

NS铁路
,
-12.289357483.76
2016年1月7日下午1:45

如果您固定
.AccountInfo
的高度（在我的示例中为150px），您可以使用
高度：calc（100%-150px）
表示
。DebitsAndCredits
，其加起来的高度为100%

但是，您还需要添加两个内容：
margin:0
和
height:100%
用于
html
和
body
，以及
margin top:0
用于第一个
p
标记

最后一个是相当棘手的：
.AccountInfo
没有任何页边距顶部，但它从第一个
p
元素获得默认的页边距顶部（由于“页边距折叠”现象）。如果将其设置为0，则整个过程将正常工作


html，
身体{
保证金：0；
身高：100%；
}
.AccountInfo{
高度：150像素；
}
.借方和贷方{
高度：计算（100%-150px）；
溢出y：自动；
}
.AccountInfo p:类型的第一个{
边际上限：0；
}

乔·多伊


伊班：
HTB0001234567


余额：
3133.56


货币：
欧元


温迪
,
+10.5就餐者2016年1月10日下午12:20

丹尼
,
+10.5就餐者2016年1月10日下午12:14

乔的比萨饼
,
-31.5134678943.88
2016年1月10日凌晨1:23

北风工业
,
+2310.7 2016年1月9日下午7:00工资

咖啡和蛋糕
,
-2.5468832.99
2016年1月8日上午11:14

阿尔伯特·海因
,
-76.65489923982.45
2016年1月7日晚上10:30

鞋和夹克
,
-89567222.67
2016年1月7日晚上9:29

NS铁路
,
-12.289357483.76
2016年1月7日下午1:45

非常感谢您！