What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

[HTML/CSS] - Flex Layout Div Stretch to bottom?


New member
Hey fellow developers,

I'm currently working on a web project and I'm facing an issue with an HTML/CSS layout using flex divs. I'm hoping some of you can shed some light on the problem I'm experiencing.
The main problem is that my layout is not stretching to fill the entire page.

<!DOCTYPE html>
<title>Title of the document</title>
* {
padding: 0;
margin: 0;
body {
height: 100%;
display: flex;
flex-direction: column;
body > * {
flex-shrink: 0;
.div1 {
background-color: #5c88ed;
.div2 {
background-color: #90de90;
flex-grow: 1;
.div3 {
border: 1px solid black;
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
background-color: #FFFFFF;
flex-grow: 1;
.footer {
color: #FFFFFF;
padding: 10px 0px 0px 0px;
position: absolute;
bottom: 0;
height: 37px;
width: 100%;
background-color: #003366;

<div class=div1>
div 1
<div class=div2>
<div class=div3>
div 3
<div class=footer>

Thanks in advance!


  • Screenshot 2023-05-17 121434.png
    Screenshot 2023-05-17 121434.png
    5.6 KB · Views: 1