我想實作這個布局：
- 身體占據全視圖高度的地方，
- 它有一個固定高度的應用欄
- 和一個使用 flex-grow 占用剩余可用空間的主要部分：1。
在主要部分內，
- 有一張卡片，我想擁有主要部分高度的 80%
- 卡片可滾動（內容超過其高度）
問題似乎是當我將卡片高度設定為80%時。當我將其設定為固定800px時沒有問題
body {
background: #f1f1f1;
margin: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
body main {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* HERE IS THE ISSUE */
/* (uncomment height: 80%) */
body main #main-card {
height: 400px;
/* height: 80%; */
overflow-y: auto;
background: green;
padding: 20px;
width: 400px;
}
body main #main-card #main-card-content {
background: #bf8040;
height: 150vh;
}
body header {
width: 100%;
height: 50px;
background: red;
}<body>
<header></header>
<main>
<div id="main-card">
<div id="main-card-content"></div>
</div>
</main>
</body>我可以通過將主高度設定為 100vh 減去標題的高度來修復它，但我想保留 flex-grow 屬性
這是復制問題的codepen
有什么建議么？
uj5u.com熱心網友回復：
使用百分比高度時，您需要在 parent 上定義高度。
否則，您設定的百分比沒有參考（“80% of what？”）。
父母確實有flex-grow: 1，但這不是一個定義的高度，它只是一個消耗可用空間的命令。
由于 app-bar 有一個固定的高度（50px），解決方案其實很簡單：
替換flex-grow: 1為height: calc(100vh - 50px)。
height: 80%on現在#main-card可以作業了。
uj5u.com熱心網友回復：
它不完全相同，但設定：
height: calc(80vh - 50px);
會給你大致相同的輸出。雖然不完全一樣。
uj5u.com熱心網友回復：
只需添加您的 .main 類height: calc(100% - 50px);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/530747.html
標籤：htmlcss布局弹性盒
上一篇：如何對齊兩個相鄰的div？
下一篇：谷歌聯系表格影片？