当父div只有最小高度时，请使用"height:100%"

Question

当父div只有最小高度时使用height:100%。

.line {
background-color: gray;
width: 1px;
height: 100%;
margin-left: 10px;
margin-right: auto;
}
.main {
min-height:200px;
}
<div class="col-6">
<div class=line>
</div>
<div class="col-6 main">
set by min-width
</div>

当父母没有身高时，使用height:100%是无效的。

在这种情况下，maindiv的高度会根据内容的数量而变化。

因为它只有min-height；

因此，line类的height:100%不起作用。

有办法解决吗？？

Answer 1

考虑使用flex来实现这一点。据我所知，您希望您的行填充父div，而main类至少占用200px？

.parent {
display: flex;
flex-direction: column;
height: 600px;
}
.fill {
background-color: grey;
flex: 1;
}
.line {
flex-grow: 0;
min-height: 200px;
background-color: red;
}
.content-with-more-than-200px-height {
height: 220px;
}

<div class="parent">
<div class="fill">

</div>
<div class="line">
<div class="content-with-more-than-200px-height">
contents
</div>
</div>
</div>