Here is the HTML structure I am working with:
<body>
<div class="header">header</div>
<div class="content">
hello
</div>
<div class="footer">footer</div>
</body>
This is the current styling applied to the structure:
<style>
body {
padding: 0px !important;
margin: 0px !important;
}
.header {
height: 30px;
background-color: gray;
}
.footer {
height: 30px;
background-color: green;
position: fixed;
bottom: 0px;
width: 100%;
}
.content {
background-color: yellow;
}
</style>
My goal is for the content div to fill the height of the window excluding the header and footer. Currently, the content div is just showing a small yellow strip due to minimal text inside it, with the rest of the page being white. I have tried using height: 100%; on the content div, but it did not work as expected. Any help on how to make the content div occupy the remaining space is appreciated.