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
More CSS Tips
- A matrix of cubes using one element Create a matrix of cubes using only one element.
- Cut your image into pieces Use CSS mask to cut your image into small pieces.
- Hamburger menu icon Use CSS gradients to create a menu icon.
- Multi-line text decoration Use CSS gradients to decorate your text.