3
我正在研究一個web應用程序，並且遇到了佈局問題。CSS - 如何使容器適合祖父母的所有可用身高？
這裏是預期的設計，它由3個主要部分組成：
- 文章標題
- 文章內容
- 文章頁腳
這是很容易使用CSS Flexbox實現這一設計。
html, body, article {
height: 100%;
margin: 0;
color: white;
}
.article {
display: flex;
flex-direction: column;
}
.article-header {
background-color: orange;
}
.article-footer {
background-color: green;
}
.article-content {
flex-grow: 1;
background-color: CornflowerBlue;
}
<article class="article">
<header class="article-header">Header</header>
<div class="article-content">Article Content</div>
<footer class="article-footer">Footer</footer>
</article>然而，在實際應用中的HTML元素嵌套深得多，有時沒有得到控制（對使用中的角/陣營第三方組件或包含）
因此，HTML通常如下所示：
html, body, article {
height: 100%;
margin: 0;
}
.article {
display: flex;
flex-direction: column;
}
.article-header {
background-color: orange;
}
.article-footer {
background-color: green;
}
.article-wrapper {
flex-grow: 1;
}
.article-content {
flex-grow: 1;
background-color: CornflowerBlue;
}
<article class="article">
<header class="article-header">Header</header>
<div class="article-wrapper">
<div>
<div>
<div class="article-content">
Article Content.
Can I fit all available height?
</div>
</div>
</div>
</div>
<footer class="article-footer">Footer</footer>
</article>看來，在這種情況下，只有一個方法，使.article內容適合所有可用的高度是這些風格一路下跌，從.article-包裝添加到每個容器文章內容 ：
display: flex;
flex-direction: column;
flex-grow: 1;
但是，正如我所說，這是很成問題，因爲有時嵌套比較深或容器元素是由第三方組件生成。
請讓我知道，如果有更好的方法來達到所要求的設計。
預先感謝您！
如果內容足夠長，它將填充可用高度。你需要設置背景顏色還是什麼？如果是這樣，你可以在'
'上設置它，以便它可以顯示。 – sorayadragon這是一個好點！不幸的是，長內容將頁腳推出屏幕，而它應該始終停留在頁面底部。 –
@sorayadragon，我明白你的意思了！這真的很有幫助，可以用非常優雅的方式解決問題... –