Here is an image of the design I envision.
- It will feature a sticky footer that remains at the bottom of the page at all times.
- The main content area should adjust its height to fill the space between the header and footer, with a scrollbar appearing automatically if the content exceeds the available space.
** If there are any unnecessary elements in my code, please point them out as I aim for a simple design.
** As seen on JSFIDDLE, the black main content div appears quite short. This issue was resolved by removing the fixed height property, but it now shows up as a small rectangle at the top of the page when there is no content. The desired outcome is for the content to stretch from the header to the footer, scrolling only when needed.
HTML CODE:
<body>
<div id="page">
<div id="header">
</div>
<div id="main">
</div>
<div id="footer">
</div>
</div>
</body>
CSS CODE:
html, body
{
padding:0;
margin:0;
height:100%;
}
#page
{
min-height:100%;
position:relative;
height:100%;
min-width:960px;
}
#header
{
background-color:#115EA2;
height:100px;
width:100%;
position:relative;
}
#main
{
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
/*min-height:100%;
height:auto;
height:100%;*/
margin:0 auto -50px;
vertical-align:bottom;
text-align: left;
color:#115EA2;
padding: 20px 20px 40px 20px;
text-decoration: none;
}
#footer
{
position:fixed;
width:100%;
bottom:0;
height:35px;
background-color: #115EA2;
}
/* NAVIGATION BAR CODE */
#navigation
{
min-width:930px;
position:relative;
white-space:nowrap;
padding:65px 0 0 0;
}