Currently, I am developing a web application and facing challenges with the layout.
The expected design includes 3 significant components:
- Article Header
- Article Content
- Article Footer
Utilizing CSS Flexbox makes it relatively simple to implement this design.
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>However, when dealing with actual HTML elements in the application, the nesting can become much more complex and at times uncontrollable (especially when using third-party components or transclusion within Angular/React).
As a result, the structure of the HTML might look like this:
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>In such cases, the only way to ensure that .article-content spans the entire available height is by applying these styles to each container from .article-wrapper down to article-content:
display: flex;
flex-direction: column;
flex-grow: 1;
Nevertheless, this approach can be difficult due to deep nesting or dynamically generated container elements by third-party components.
If you have any suggestions on better methods to achieve the desired design, please share your insights.
Thank you for your assistance!