Despite having content, my main div doesn't have a height or width. I am trying to make the main div fill 100% of the space between the header and footer so that the background image for main is displayed across the entire page excluding the header and footer. However, I haven't been successful in making main dynamically resize when the browser window is resized. How can I achieve this?
HTML:
<body>
<div id="page">
<header id="header">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</header>
<content id="main">
<h1>Body</h1>
<p>Text...</p>
</content>
<footer id="footer">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</footer>
</div>
</body>
CSS:
#page {
min-height: 100%;
height: 100%;
position: relative;
}
#main {
padding-bottom: 50px;
background: url('Background.jpg');
}
#header {
text-align: center;
background: #595959;
font-size: 30px;
line-height: 60px;
}
#header ul li {
display: inline-block;
height: 60px;
width: 19%;
}
#header ul li:hover, #footer ul li:hover {
background: #696969;
}
#header ul li a, #footer ul li a {
display: block;
text-decoration: none;
color: #BFBFBF;
}
#footer {
position: absolute;
height: 50px;
width: 100%;
bottom: 0;
text-align: center;
background: #595959;
font-size: 25px;
line-height: 50px;
}
#footer ul li {
display: inline-block;
height: 50px;
width: 15%;
}
#footer img {
margin-right: 10px;
}