我有以下html正文：
<body>
<div class="container-fluid h-100 border">
<div class="row h-50">
<div class="col-sm-12 bg-danger">Row1</div>
</div>
<div class="row h-50">
<div class="col-sm-12 bg-primary">Row2</div>
</div>
</div>
</body>
我想更改2行的高度，但始终让它们都填充容器。因为它们都是占据屏幕的一半。但是，如果我将高度更改为20和80，则行仅恢复为屏幕顶部的2个小行。唯一起作用的其他高度是100和100，它仅使2个全屏显示的行都不是我想要的。
任何想法？
答案 0 :(得分：0)
flex-grow-1 在div.container-fluid
如果您希望两个rows均等地填充容器，请在每个flex-grow-1上使用body,
html {
height: 100%;
}。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container h-100 d-flex flex-column">
<div class="row flex-grow-1 bg-danger"></div>
<div class="row flex-grow-1 bg-primary"></div>
</div>flex-grow-1
行填充了50％的容器
否则，对其中一个使用body,
html {
height: 100%;
}，并控制第二个。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container h-100 d-flex flex-column">
<div class="row h-25 bg-danger"></div>
<div class="row flex-grow-1 bg-primary"></div>
</div>100%
第一行填充了25％的容器，第二行填充了剩余的可用空间。
容器的所有父级都必须具有export type BreadcrumbItemProps = {
isCurrent?: boolean;
};
export const Item = styled.span<BreadcrumbItemProps>`
display: inline;
padding: 10px;
cursor: default;
font-weight: ${ props.isCurrent ? 'normal' : 'bold'};
`;
的高度。
答案 1 :(得分：0)
首先，您必须将html和body设置为100％的高度。
然后，您可以根据需要使用预定义的引导程序类，例如h-50或h-75来填充容器-就像{{3} }
但是，如果您想要特定的高度，则可以简单地创建自定义类，如下所示：
h-80让我知道这是否对您有帮助。