SharePoint 2010 Fixed Width Masterpage with Sticky Footer
Thanks to E. Struyf for his V4 Masterpage that has a Sticky Footer and Docked ribbon, this is based on his efforts, and I couldn’t have gotten this far without his masterpage example and his correspondence.
I had a need for a V4 Masterpage with a fixed width, a sticky footer, and a docked ribbon, and it had to work on IE7. However, IE7 has this small issue, specifically that it doesn’t like people. So, when I used E. Struyf’s method, I found that it worked beautifully in IE8, but when put in IE7 with a fixed width, the method worked, but left an empty area below the footer that the user could scroll into. After a great deal of troubleshooting, I found that two changes were necessary to his masterpage.
The CSS for the html and body tags was as follows:
html, body
{
height: 100%;
}
body
{
overflow: hidden !important;
}
I changed it to:
html, body
{
overflow: hidden !important;
height: 100%;
}
body { }
After this change to prevent the adding of a non-sense horizontal scrollbar, I added the following conditional javascript to force correct resizing in IE7:
<!--[if IE 7]>
<script type="text/javascript">
var fixResize = function () {
var workspace = document.getElementById('s4-workspace');
var fixCode = function () {
setTimeout(function() {
workspace.style.height = workspace.clientHeight+1 + "px";
setTimeout(function() {
workspace.style.height = workspace.clientHeight-1 + "px";
}, 1);
}, 1);
}
fixCode();
workspace.onmouseover = function() {
fixCode();
workspace.onmouseover = null;
}
};
SP.UI.Workspace.add_resized(fixResize);
</script>
<!--span class="hiddenSpellError" pre=-->endif]-->
There is a minor known issue, specifically that on Application Pages, the resize will not fire until the mouse is over the content area.
As for the fixed width, that’s as easy as setting the CSS for the form tag to:
form
{
width:1050px;
margin-left:auto;
margin-right:auto
}
And simply add the class “s4-nosetwidth” to the “s4-workspace”
