display:flex and display:grid
With CSS you can use display: flex and display: grid are supported by all current browsers. The only thing lacking is subgrid functionality, which is only available in Firefox.
Example using display: grid:
body
{
display: grid;
grid:
"header" auto
"main" minmax(0,1fr)
“footer" auto /
minmax(12rem, 93rem);
}
header
{
grid-area: header;
background: gray;
}
main
{
grid-area: main;
background: blue;
align-self: center
}
footer
{
grid-area: footer;
background: black;
}
<header>My Website</header>
<main>Welcome to my blog..
<details><summary>Collapsible content</summary>
<p>Hello and welcome to my blog.</p>
<p>Hello and welcome to my blog.(2).</p>
<p>Hello and welcome to my blog. (3).</p>
</details>
</main>
<footer>copyright Mathiti 2022 </footer>
Example using display: flex:
html, body
{
min-height: 100vh;
padding: 0;
margin: 0;
}
body
{
display: flex;
}
main
{
background: blue;
align-self: center;
}
<main>Welcome to my blog
<details><summary>Collapsible content</summary>
<p>Hello and welcome to my blog.</p>
<p>Hello and welcome to my blog. (2).</p>
<p>Hello and welcome to my blog. (3).</p>
</details>
</main>
It’s worth noting that in the examples that utilize both grid and flex, display:flex is generally easier to employ if that’s all you require. The advantage of using display:grid is that you can use logical grid-area names and merely update the grid property to swap layouts as needed without having to reorganize the elements. It’s also worth noting that Chrome doesn’t support subgrid, which would make nested layouts a lot easier. Therefore, as a developer you should arrange elements according to their accessibility requirements rather than their visual appearance.
CSS calc()
You may use calc(), which was introduced in CSS3, to have the center element span the full page vertically.The following example assumes that we have fixed-height header and footer components and want the section tag to use the whole vertical height available.
CSS Example:
html,
body {
height: 100%;
}
header {
height: 100px;
background: gray;
}
section {
height: calc(100% - (100px + 150px));
background: black;
}
footer {
height: 160px;
background-color: gray;
}
<header>Welcome</header>
<section>Hi There</section>
<footer>150px</footer>
By using the cal() function in the above example we are adding the height of the elements. Rather than deducting from 100%. It is important to note that all parent elements should use height:100%.
