Fixed Header and Footer

by Derek Wood

HTML

<header class="container global-header">
<div class="inner-w">
    <h2>Header </h2>
</div>
</header>

<div class="container main-content">
<div class="inner-w">
    <h1>Main Content</h1>
    <p>The main puzzle with fixed headers and footers is that most mobile browsers at the time of writting, 09/19/2013, don't deal with position: fixed; well. There is jQuery UI, but in my experience, it's hard to break out of. You either use it for everything or nothing. My iphone 5 handles it just perfectly, but not everyone has the fanciest phone on the market, and the iphone 4 doesn't even handle it that well. The fixed containers still often jump around when scrolling.</p>

    <ul>
        <li>This has margin top and bottom that is equal to the heights of the header and footer to offset the overlap</li>
        <li>I'm going to use SASS variable for this purpose</li>
        <li>I'm using normalize as a reset</li>
        <li>And box-sizing: border-box; for a natural box model (padding inside the box)</li>
        <li>I also set the .main-content to z-index: -1; so that the .global-header (because it is higher in the DOM) wouldn't be covered up by the .main-content which appears later in the DOM which makes it "higher" plain wise...</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
       ...

SCSS

// User reset

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }


// structure

.container {
    position: relative;
    width: 100%;
    float: left;
}

.inner-w {
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    background: rgba(0,0,0,.02);
    padding: 1rem;
}


// type

body {
    font-family: arial;   
}

h2:after, h3:after {
    content: " (relative)";
}

.main-content {

    h1 {
        font-size: 2em;
        font-weight: bold;
        margin-bottom: .2em;
    }
        
    p, li {
        font-size: .9em;
        line-height: 1.4
    }
    
    ul {
        list-style: square;
        padding: 1em;
    }
    
    ul li {
        margin-bottom: .5em;
    }
} // .main-content


// style

    // variables
    $global-header-height: 8em;
    $global-footer-height: 6em;

.global-header {
    background-color: lightgray;
    min-height: 100px;
    border-bottom: 1px solid gray;
}

.main-content {
    background-color: #efefef;
}

.global-footer {
    background-color: darkgray;
    min-height: 100px;
    border-top: 1px solid gray;
}

@media (min-width: 600px) and (min-height: 700px) {
    
    .global-header {
        position: fixed;
        top: 0; left: 0;
        height: $global-header-height;
        z-index: 1;
    }
    
    .main-content {
        margin-top: $global-header-height;
        margin-bottom: $global-footer-height;
    }
    
    .global-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        height: $global-footer-height;
        z-index: 1;
    }
    
    h2:after, h3:after {
        content: " (fixed)";
        color: #ff0066;
    }

}