UPDATE: After incorporating the provided code, here is the revised version.
In essence, we have the following structure:
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#main {
min-width: 980px;
margin: 0 auto;
font-size: 0.75em;
padding:101px 0 37px 0;
}
header {
height:101px;
background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
position:fixed;
top:0;
left:0;
width:100%;
z-index:100;
}
footer {
overflow: hidden;
position:absolute;
bottom:0;
left:0;
width:100%/*; height:37px*/;
background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
color:#9d9d9d;
text-transform:uppercase
}
</style>
</head>
<body>
<div id="main">
<header>...</header>
<section id="content">... with <a name="blah">anchor</a> a couple paragraphs down the page</section>
<footer>...</footer>
</div>
</body>
</html>
The anchor links were originally obscured by the top navigation. To rectify this issue, CSS frames were utilized to align the content correctly. The necessary adjustments in CSS include:
#main
{
padding:0 0 37px 0;
}
section#content
{
position:fixed;
top:101px;
width:100%;
bottom:37px;
overflow:auto;
}
footer
{
position:fixed;
height:37px;
}
Consequently, the top padding on #main was eliminated.
Content and footer were given fixed positioning, hence requiring the content to be shifted down by 101px (as indicated by 'top').
A specific height was assigned to the footer, with a corresponding bottom value applied to the content section.
The use of 'overflow:auto' introduced scrollbars, while setting the width to 100% ensured proper scrollbar placement.
This implementation was tested across various browsers including IE 9, Chrome 10, Firefox 4, and Opera 11.
Additional note: Limited information could be found online regarding this approach. Eric Meyer briefly mentions it in Smashing CSS. Unfortunately, existing resources do not extensively assess how anchor links interact with the content, highlighting a notable gap in available documentation.