3
私はWebアプリケーションで作業しており、レイアウトに問題があります。それは非常に簡単ですCSS - どのようにコンテナを祖父母のすべてのavailbleの高さに合わせるには？
- 条ヘッダー
- 記事の内容
- 条フッター
：ここ
は、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、私はあなたのポイントを今持っている！これは本当に有益で、かなりエレガントな方法で問題を解決することができます... –