Within flexbox, I've laid out three rows of boxes with varying heights. This layout ensures that the rows always align perfectly with the bottom of the browser window without any gaps. You can see the full layout on Codepen by following this link: https://codepen.io/heavymessing/pen/gBzvZX?editors=1100
Everything is working well so far, but what I'm aiming for is to keep all the boxes in view even when the browser window is resized to a height between 660px and 1300px.
This way, users won't have to scroll down to see the last row of boxes if they are using a smaller laptop or if their browser window is set to a lower height.
View at 1300px - large screen view: https://i.sstatic.net/qAKOi.jpg
View at 660px - small screen view: https://i.sstatic.net/rINYE.jpg
Here's how the code looks:
HTML
<div class="container">
<div class="row">
<!-- HTML content omitted for brevity -->
</div>
<!-- /row -->
</div>
<!-- /container -->
SCSS
* {
box-sizing: border-box;
}
body {
background-color: rgba(0, 0, 255, 0.1);
font-family: "Raleway", sans-serif;
font-size: 14px;
padding: 0;
margin: 0;
}
.container {
background-color: rgba(0, 255, 0, 0.1);
width: calc(100% - 1rem);
width: 100%;
}
/* SCSS styling omitted for brevity */