You seem to have some misunderstandings regarding sizing.
When setting a full page layout and applying padding to the body element, using min-height:100vh can cause issues as it offsets the viewport height by 20px from the body's padding, leading to a horizontal scrollbar. Instead, consider using min-height:100% and set the body's height to 100vh. Don't forget to reset the box-sizing property as well.
Additionally, setting width: 100% for block elements is unnecessary unless there is a specific reason for it.
Here are some examples of fixing the sizing and positioning the footer at the bottom (with a sticky option):
- Ensure proper sizing and footer placement.
body {
padding: 20px;
font-family: Helvetica;
margin: 0;
height: 100vh;/* reference for the direct child */
box-sizing: border-box;/* include padding and border into size calculation */
}
.wrapper {
display: grid;
grid-template-columns: auto;
min-height: 100%;/*of available space of sized(height:xx) parent */
}
.box {
background-color: #20262e;
color: #fff;
border-radius: 3px;
padding: 20px;
font-size: 14px;
}
.a {
grid-area: 1/1/2/2;
}
.b {
grid-area: 2/1/3/2;
}
.footer {
grid-area: 4/1/5/2;
/* ?? should I stick at the bottom of the viewport ?? */
position:sticky;
bottom:0;
}
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box footer">Footer</div>
</div>
If the footer does not need to be visible all the time, you can remove position:sticky and bottom:0.
- A useful trick for following your grid area settings idea without using row template is to create an extra virtual container that occupies multiple rows (although this method may not always be elegant).
body {
padding: 20px;
font-family: Helvetica;
margin: 0;
height: 100vh;/* reference for the direct child */
box-sizing: border-box;/* include padding and border into size calculation */
}
.wrapper {
display:grid;
min-height: 100%;/*of available space of sized(height:xx) parent */
}
.box {
background-color: #20262e;
color: #fff;
border-radius: 3px;
padding: 20px;
font-size: 14px;
}
.a {
grid-area: 1/1/2/2;
}
.b {
grid-area: 2/1/3/2;
}
.footer {
grid-area: 0/1/21/2;
}
/* Fill remaining rows if any space left */
.wrapper:before {
content:'';
grid-area:3/1/19/2;/* about 15 rows */
}
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box footer">Footer</div>
</div>
- To utilize the
grid feature effectively with the right options on grid-template-rows, you can follow these steps:
body {
padding: 20px;
font-family: Helvetica;
margin: 0;
height: 100vh;
/* Reference for the direct child */
box-sizing: border-box;
/* Include padding and border into size calculation */
}
.wrapper {
display: grid;
grid-template-rows: auto auto 1fr auto;
min-height: 100%;
/* Of available space of sized(height:xx) parent */
}
.box {
background-color: #20262e;
color: #fff;
border-radius: 3px;
padding: 20px;
font-size: 14px;
}
.footer {
grid-row: 4
}
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box footer">Footer</div>
</div>
Edit: For layouts with an unknown number of rows, using flex would be more efficient.
body {
padding: 20px;
font-family: Helvetica;
margin: 0;
height: 100vh;
/* Reference for the direct child */
box-sizing: border-box;
/* Include padding and border into size calculation */
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
.box {
background-color: #20262e;
color: #fff;
border-radius: 3px;
padding: 20px;
font-size: 14px;
}
/* If you need spacing, use margin or a pseudo-element here! */
.box + .box {
margin-top:2px;
}
.wrapper:after {
content: '';
flex: 1;
}
.footer {
order: 2;
}
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box footer">Footer</div>
</div>