帶 flex 的 Flexbox：1 個孩子和孫子 100%

Question

想象一下這種情況：一個簡單的 3 行布局，由 flexbox 組成，中間一行填充了所有可用空間。 很標准的東西。

<body>
   <div class="container">
        <div class="flex-container">
            <div>header</div>
            <div class="content">
                <div class="item red">asdasd</div>
                <div class="item yellow">asdasd</div>
                <div class="item green">asdasd</div>
            </div>
            <div>footer</div>
        </div>
   <div>
<body>

這里的CSS：

html,
body,
.container {
    height: 100%;
}

.flex-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.flex-container .content {
    flex: 1;
}

.flex-container .content .item {
    height: 100%;
}

（省略背景顏色的 css，你可以猜到）。

問題是“內容”div 沒有下推頁腳 div，將其保持在頁面底部，就像 position:fixed with bottom: 0 一樣。滾動頁面顯示，除了這個問題，正確的行為，帶有 3 個不同顏色的 div，所有 100% 的瀏覽器窗口大小。

我缺少什么？

編輯：看看這個 jsfiddle https://jsfiddle.net/rq1xywng/

Answer 1

我不確定你在找什么。 也許它會對你有所幫助。

 html, body { margin: 0; padding: 0; box-sizing: border-box; height: 100vh; min-height: 100vh; } .container { height: 100vh; min-height: 100vh; background-color: fuchsia; } .header, .footer { height: 30px; } .flex-container .content { display: flex; height: 100%; height: calc(100vh - 60px); } .flex-container .content .item { width: 100%; height: 100%; } .red { background-color: red; } .yellow { background-color: yellow; } .green { background-color: green; }

 <div class="container"> <div class="flex-container"> <div class="header">header</div> <div class="content"> <div class="item red">asdasd</div> <div class="item yellow">asdasd</div> <div class="item green">asdasd</div> </div> <div class="footer">footer</div> </div> <div>

Answer 2

所以你在這里有幾個錯誤：

您將容器中的每個項目都設置為 100% - 這相當於 300% :)
他們的父母“只有”100%
除非給定高度，否則頁腳將被隱藏
您以不健康的方式使用了 vh 和 % 組合。

你應該有 2 個 flex 組件：

.flex-container - 匹配屏幕尺寸
.flex-container .content - 能夠拉伸項目

您應該將.item設置為flex: 1;

這是一個工作版本： https : //jsfiddle.net/oj0thmv7/5/

這是一個滾動的工作示例： https : //jsfiddle.net/oyLbxsrc/

Answer 3

如果您將 100% 更改為 100vh，這將起作用

.flex-container .content .item {
    height: 100vh;
}

還是我誤解了這個問題？

帶 flex 的 Flexbox：1 個孩子和孫子 100%

問題描述

3 個解決方案

解決方案1
2 2020-09-03 14:55:39

解決方案2
1 已采納 2020-09-03 14:13:29

解決方案3
-2 2020-09-03 14:04:09

帶 flex 的 Flexbox：1 個孩子和孫子 100%

問題描述

3 個解決方案

解決方案1 2 2020-09-03 14:55:39

解決方案2 1 已采納 2020-09-03 14:13:29

解決方案3 -2 2020-09-03 14:04:09

解決方案1
2 2020-09-03 14:55:39

解決方案2
1 已采納 2020-09-03 14:13:29

解決方案3
-2 2020-09-03 14:04:09