title: Prevent CSS Element From Expanding Page
body: <p>I have an HTML page that has three elements behind the main content (different z-indexes).  The problem is, when my page height is less than the end position of two of those elements (when I make my browser height smaller), they push underneath and past the bottom of the footer of the page, expanding the page height so a user can scroll past the footer and see the elements sticking through.  The elements causing the problem are backvisual2 and backvisual3.</p>
  
  <p>I have tried overflow settings, but what I am looking for is overflow of only specific elements within the body to be ignored, not all of them.
  What CSS will be necessary to hide the overflow of these three elements to prevent the page height from expanding beyond the footer?</p>
  
  <p><strong>EDIT:</strong> I added a minimum height to the body, and that has created a temporary fix in my example page linked above. </p>
  
  <p>CSS:</p>
  
  <pre><code>#backvisual2
  {
      height: 412px;
      width: 100%;
      background-image: url("images/mapcover.jpg");
      background-repeat:no-repeat;
      background-size:cover;
  
      position:absolute;
      left:0px;
      top:169px;
      z-index:-2;
  }
  #backvisual3
  {
      height: 32px;
      width: 100%;
      background-image: url("images/backdropdivider.png");
      background-repeat: repeat-x;
  
      position:absolute;
      left:0px;
      top:550px;
      z-index:-1;
  }
  .wrapper
  {
      min-height: 100%;
      height: auto !important;
      height: 100%;
      margin: 0 auto -220px;
  }
  html
  {
      height: 100%;
  }
  
  body
  {
      background-color: #EEE;
      height: 100%;
  }
  #footerstart
  {
      background: transparent URL('images/footerdrop.png') repeat-x;
      height: 16px;
      padding: 0px;
      width: 100%;
      margin-top: 32px;
      margin-bottom: 0px;
  }
  #footer
  {
      margin-top: 64px;
      text-align: center;
      vertical-align: top;
      background: #838383;
      width: 100%;
      min-width: 850px;
      margin-top: 0px;
      padding-top: 16px;
      padding-bottom: 24px;
      height: 132px;
  }
  #footersect
  {
      vertical-align: top;
      text-align: left;
      display: inline-block;
      width: 256px;
      border: 1px;
      padding-left: 16px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;...&lt;/head&gt;
  &lt;body&gt;
      &lt;div id="backvisual1"&gt;&lt;/div&gt;
      &lt;div id="backvisual2"&gt;&lt;/div&gt;
      &lt;div id="backvisual3"&gt;&lt;/div&gt;
  
      &lt;div class="wrapper"&gt;
          &lt;div id="container"&gt;
              &lt;div id=header&gt;&lt;/div&gt;
                  &lt;div id=menu&gt;
                  ...
                  &lt;/div&gt;
              &lt;/div&gt;
              [PAGE CONTENTS HERE]
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footerstart"&gt;&lt;/div&gt;
      &lt;div id="footer"&gt;
      ...
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>