如果你看一下示例片段，我試圖#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>
1 回答
皈依舞
TA貢獻1851條經驗 獲得超3個贊
感謝遇到這個小提琴：https://jsfiddle.net/MadLittleMods/LmYay/
我設法解決了我的問題并有一個工作示例：https://jsfiddle.net/p459qvfk/2/
工作示例復制過來：
* {
font-family: Arial;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
header {
display: flex;
flex-direction: column;
justify-content: flex-start;
/* align items in Main Axis */
align-items: stretch;
/* align items in Cross Axis */
align-content: stretch;
/* Extra space in Cross Axis */
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;
flex: 1;
background-color: red;
align-items: center;
}
#feature_container {
display: inline-flex;
flex: 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>
<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>
- 1 回答
- 0 關注
- 110 瀏覽
添加回答
舉報
0/150
提交
取消