It may seem challenging to achieve this desired aesthetic using just CSS and HTML alone. According to insights from Ruup and the discussion on Fixed position in only one direction, incorporating JavaScript for layering could be a viable solution.
Fortunately, I managed to find a workaround that somewhat achieves the desired outcome (albeit not with perfect elegance):
http://jsfiddle.net/MKEbW/5/
Within the body tag of the HTML:
<div id="simulated-html">
<div id="footer">
<span>
<!-- Insert footer text here -->
</span>
</div>
<div id="simulated-body">
<!-- Your website content goes here -->
</div>
</div>
CSS styling:
* { margin:0; padding:0; }
html {
font: 12px/1.5em Georgia;
}
p { padding: 5px; }
html, body {
height: 100%;
overflow: hidden; /* Conceal scrollbars as custom ones are created */
}
#simulated-html {
background: orange;
overflow-x: scroll; /* Show horizontal scrollbars if needed (optional) */
overflow-y: hidden; /* Hide vertical scrollbars by utilizing #simulated-body */
position: relative; /* For aligning #footer on #simulated-html */
height: 100%;
}
#simulated-body {
overflow-y: scroll; /* Display vertical scrollbars as required (optional) */
overflow-x: hidden; /* Hide horizontal scrollbars through #simulated-html */
height: 100%;
background: #eee;
/* Acts as a container */
width: 450px;
margin: 0 auto;
}
#footer {
position: absolute;
bottom: 0px; /* Vertically align with #simulated-html */
width: 100%;
background: red;
z-index: 99; /* Keep footer displayed prominently */
color: white;
}
#footer span {
width: 450px;
margin: 0 auto;
background: green;
display: block;
}
This solution appears to function effectively across IE7+ and modern browsers, validated via browserlab.adobe.com.
Tests conducted with various scrollbar scenarios, different viewport sizes in Chrome 18.
I recommend having a backup plan for unsupported browsers, or consider implementing a JavaScript alternative if necessary.