如果你看一下示例片段，我试图#feature_header_container（以红色）展开以填充剩余的高度header，但因为我在里面有其他内容，header如图所示<p>，当我设置height: 100%它时，#feature_header_container它会溢出到外面header，但我希望它只扩大 的剩余高度header，我该怎么做？
现在，#feature_header_container（红色）溢出到外部并被内部的第一个元素header压低。<p>header
*
{
font-family: Arial;
box-sizing: border-box;
}
html, body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
header
{
display: block;
height: 100%;
min-height: 100vh;
background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
-webkit-box-shadow: 0px 10px 14px -6px rgba(0,0,0,0.57);
box-shadow: 0px 10px 14px -6px rgba(0,0,0,0.57);
border-radius: 0 0 80px 80px;
padding-left: 10%;
padding-right: 10%;
}
#p_test
{
display: inline-block;
}
#feature_header_container {
display: flex;
height: 100%;
margin-top: 20px;
background-color: red;
align-items: center;
}
#feature_container {
display: inline-flex;
flex-grow: 1;
justify-content: center;
background-color: blue;
color: white;
}
.feature_box {
background-color: pink;
}
<html>
<body>
<header>
<p id="p_test">
Test Test Test
</p>
<div id="feature_header_container">
<div id="feature_container">
<div class="feature_box">
<p>Test</p>
</div>
<div class="feature_box">
<p>Test</p>
</div>
<div class="feature_box">
<p>Test</p>
</div>
</div>
</div>
</header>
<main>
<p>TesttestTesttestTesttestTesttestTesttest</p>
</main>
</body>
</html>
皈依舞
相关分类