Fixed header and footer

A basic fixed header and footer layout

by meatHucker

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<body>
  <header>
    <div class="container">
      <div class="row">
        <div class="centered">
          <a>Logo</a>
        </div>
      </div>
    </div>
  </header>
  <section class="u-full-width u-cf">
    <!-- .container is main centered wrapper -->
    <div class="container">

      <!-- columns should be the immediate child of a .row -->
      <div class="row">
        <div class="one column">One</div>
        <div class="eleven columns">Eleven</div>
      </div>

      <!-- just use a number and class 'column' or 'columns' -->
      <div class="row">
        <div class="two columns">Two</div>
        <div class="ten columns">Ten</div>
      </div>

      <!-- there are a few shorthand columns widths as well -->
      <div class="row">
        <div class="one-third column">1/3</div>
        <div class="two-thirds column">2/3</div>
      </div>
      <div class="row">
        <div class="one-half column">1/2</div>
        <div class="one-half column">1/2</div>
      </div>
      <hr>
      <table class="u-full-width">
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
            <th>Location</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Dave Gamache</td>
            <td>26</td>
            <td>Male</td>
            <td>San Francisco</td>
          </tr>
          <tr>
            <td>Dwayne Johnson</td>
            <td>42</td>
            <td>Male</td>
            <td>Hayward</td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>
  <footer>
    <div class="container">
      <div class="row">
        Footer txt
      </div>
    </div>
  </footer>
</body>

CSS

body {
  position: relative;
  margin: 0;
}

header,
footer {
  position: fixed;
  width: 100%;
  background-color: #ccc;
  z-index: 999;
}

header {
  top: 0;
  height: 50px;
}

footer {
  bottom: 0;
  height: 50px;
}

section {
  padding: 60px 0;
  /* footer/header height + 10px padding */
  height: 1000px;
  background: #eee;
}

section .container {
  border: pink 1px solid;
  background: white;
}

.column,
.columns {
  background: #eee;
}

.centered {
  text-align: center;
  background: url('http://api.thumbr.it/whitenoise-361x370.png?background=#cccccc&noise=#eeeeee&density=78&opacity=5');
}