Full screen height container
Make your container fill all the screen height
- No cascading
height:100% - No side effects of the
100vh - Works with the default margin of
<body> - No overflow issue. The height will grow to fit the content.
html {
display: grid;
min-height: 100%;
}
.box {
height: 100%;
}See the Pen Full height element by Temani Afif (@t_afif) on CodePen.
More detail: verpex.com/blog/website-tips/modern-layouts-using-css-grid