title: CSS White Space At Bottom of Page
body: <p>How can I get rid of the space at the bottom of the page? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Basic Style */
  
  html,
  body {
    height: 100%;
  }
  body {
    background-color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 12pt;
    font-weight: 100;
    color: #212121;
    text-decoration: none;
    line-height: 100%;
    height: 100%;
    margin: 0px 0px 0px 0px;
  }
  a:link {
    color: #42b4da;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
  }
  a:visited {
    color: #002946;
    text-decoration: none;
  }
  a:active,
  a:hover {
    color: #670f08;
    text-decoration: underline;
  }
  img {
    border: 0px solid white;
    margin: 0px;
    padding: 0px;
  }
  .clear {
    clear: both;
  }
  /* Text Formatting */
  
  h1 {
    font-size: 20pt;
    color: #212121;
    font-weight: lighter;
  }
  h2 {
    font-size: 20pt;
    color: #212121;
    font-weight: lighter;
  }
  h3 {
    font-size: 20pt;
    color: #212121;
    font-weight: lighter;
  }
  blockquote {
    font-size: 12pt;
    font-style: italic;
    margin: 30px 30px 30px 0;
    padding: 0 0 0 20px;
    border-left: 1px solid #ccc;
  }
  /* Clear */
  
  .clearBoth {
    clear: both;
  }
  /* Page Wrapper*/
  
  #pageWrapper {
    width: 100%;
    height: 100%;
  }
  /* Page Top */
  
  #pageTop {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    overflow: hidden;
  }
  #topTitle {
    background-color: #262626;
    color: #CCCCCC;
    width: 100%;
    height: 100%;
    float: left;
    margin-right: -250px;
  }
  #topRight {
    background-color: #262626;
    color: #CCCCCC;
    width: 250px;
    height: 100%;
    float: right;
  }
  /* Page Main */
  
  #pageMain {
    background: #ffffff url(../style/images/sidebarBackground.gif) repeat-y right;
    width: 100%;
    margin-top: 100px;
    overflow: hidden;
  }
  /* Main Content */
  
  #mainContent {
    width: 100%;
    height: 100%;
    float: left;
    margin-right: -250px;
  }
  .contentClear {
    margin-right: 250px;
  }
  .contentPost {
    margin: 40px;
  }
  .postTitle {} .postContent {} .postExtras {}
  /* Main Sidebar */
  
  #mainSidebar {
    background: #262626 url(../style/images/sidebarBackground.gif) repeat-y right;
    color: #CCCCCC;
    width: 220px;
    margin: 15px;
    height: 100%;
    float: right;
  }
  #mainSidebar h1 {
    color: #CCCCCC;
    font: 14pt'Roboto', sans-serif;
    text-align: center;
    margin: 2px;
    padding: 2px;
  }
  #mainSidebar h1:before {
    content: "â€¹";
    position: relative;
    left: -2px;
  }
  #mainSidebar h1:after {
    content: "â€º";
    position: relative;
    left: 2px;
  }
  .sidebarContent {} .sidebarNav {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .sidebarNav li:before {
    content: "//";
    position: relative;
    left: 2px;
  }
  /* Page Footer */
  
  #pageFooter {
    width: 100%;
    height: 100px;
    overflow: hidden;
  }
  #footerContent {
    background-color: #262626;
    color: #CCCCCC;
    width: 100%;
    height: 100%;
    float: left;
    margin-right: -250px;
  }
  #footerRight {
    background-color: #262626;
    color: #CCCCCC;
    width: 250px;
    height: 100%;
    float: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="pageWrapper"&gt;
    &lt;div id="pageTop"&gt;
      &lt;div id="topTitle"&gt;
        This is where the pages logo/title/whatever will go.
      &lt;/div&gt;
      &lt;div id="topRight"&gt;
        Rightside content
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="clearBoth"&gt;&lt;/div&gt;
    &lt;div id="pageMain"&gt;
      &lt;div id="mainContent"&gt;
        &lt;div class="contentClear"&gt;
          &lt;div class="contentPost"&gt;
            &lt;div class="postTitle"&gt;
              &lt;h1&gt;HELLO WORLD!&lt;/h1&gt;
            &lt;/div&gt;
            &lt;div class="postExtras"&gt;
              &lt;p&gt;
                APRIL 2, 2015 1 COMMENT
              &lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="postContent"&gt;
              &lt;p&gt;
                Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!
              &lt;/p&gt;
              &lt;p&gt;
                This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts
                content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!!
              &lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="mainSidebar"&gt;
        &lt;div class="sidebarContent"&gt;
          &lt;h1&gt;Navigation&lt;/h1&gt;
          &lt;ul class="sidebarNav"&gt;
            &lt;li&gt;
              &lt;a href="_blank"&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="_blank"&gt;About&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="_blank"&gt;Contact&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="_blank"&gt;Links&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="sidebarContent"&gt;
          &lt;h1&gt;Unordered List&lt;/h1&gt;
          &lt;ul&gt;
            &lt;li&gt;
              Here is an unordered list in the sidebar.
            &lt;/li&gt;
            &lt;li&gt;
              Here is an unordered list in the sidebar.
            &lt;/li&gt;
            &lt;li&gt;
              Here is an unordered list in the sidebar.
            &lt;/li&gt;
            &lt;li&gt;
              Here is an unordered list in the sidebar.
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="sidebarContent"&gt;
          &lt;h1&gt;Something Else&lt;/h1&gt;
          &lt;ol&gt;
            &lt;li&gt;
              Here is an unordered list in the sidebar.
            &lt;/li&gt;
            &lt;li&gt;
              Here is an unordered list in the sidebar.
            &lt;/li&gt;
            &lt;li&gt;
              Here is an unordered list in the sidebar.
            &lt;/li&gt;
            &lt;li&gt;
              Here is an unordered list in the sidebar.
            &lt;/li&gt;
          &lt;/ol&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="clearBoth"&gt;&lt;/div&gt;
    &lt;div id="pageFooter"&gt;
      &lt;div id="footerContent"&gt;
        &lt;h1&gt;This is the footer, and copyright stuff.&lt;/h1&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;a href="_blank"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="_blank"&gt;About&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="_blank"&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="_blank"&gt;Links&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="footerRight"&gt;
        &lt;p&gt;
          SMLinks
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>