title: Safari Browser Issue: Fixed footer is hiding the bottom part of my content
body: <p>The following is a problem with the Safari browser. It works fine with Chrome. I am working on a grid based portfolio site that is having some problems with the content being hidden. The last three tiles of a 3 x 4 grid are being cut off currently, is there any way to make them visible when you scroll? Thanks!</p>
  
  <p>Demo: www.mindtale.com/portfolio.html</p>
  
  <p>portfolo.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="style2.css"&gt; 
  &lt;title&gt;Mindtale Test Home&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  
  
  &lt;!-- Header --&gt;
  
  &lt;div id="headerlogo"&gt;
  &lt;a href="index.html"&gt;&lt;img src="images/logo.png"&gt;&lt;/a&gt;&lt;/div&gt;
  
  &lt;div id="headerfill"&gt;&lt;/div&gt;
  &lt;div id="header"&gt;&lt;/div&gt;
  
  &lt;div id="headerlink1"&gt;
  
  &lt;a href="portfolio.html"&gt;Portfolio&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="headerlink2"&gt;
  &lt;a href="contact.html"&gt;Contact&lt;/a&gt;
  &lt;/div&gt;
  
  
  &lt;!-- Content --&gt;
  
  
  &lt;div id="gridcontainer"&gt;
  
  &lt;div id="portfolio-grid"&gt;
  
  &lt;div class="portfolio-website"&gt;
      &lt;div class="website-thumbnail"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;&lt;img src="images/gridimg1.png" alt="BBC News"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-name"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;BBC News&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-url"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;http://news.bbc.co.uk&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-description"&gt;A popular destination for up-to-date news in the UK and around the World.&lt;/div&gt;
      &lt;div class="website-clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="portfolio-website"&gt;
      &lt;div class="website-thumbnail"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;&lt;img src="images/gridimg1.png" alt="BBC News"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-name"&gt;&lt;a href="http://www.envirogadget.com" target="_blank"&gt;EnviroGadget&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-url"&gt;&lt;a href="http://www.envirogadget.com" target="_blank"&gt;http://www.envirogadget.com&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-description"&gt;One of Dan's websites focusing on the best of eco-friendly gadgets.&lt;/div&gt;
      &lt;div class="website-clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="portfolio-website"&gt;
      &lt;div class="website-thumbnail"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;&lt;img src="images/gridimg1.png" alt="BBC News"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-name"&gt;&lt;a href="http://www.google.co.uk" target="_blank"&gt;Google&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-url"&gt;&lt;a href="http://www.google.co.uk" target="_blank"&gt;http://www.google.co.uk&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-description"&gt;The search engine that most people use.&lt;/div&gt;
      &lt;div class="website-clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="portfolio-website"&gt;
      &lt;div class="website-thumbnail"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;&lt;img src="images/gridimg1.png" alt="BBC News"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-name"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;BBC News&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-url"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;http://news.bbc.co.uk&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-description"&gt;A popular destination for up-to-date news in the UK and around the World.&lt;/div&gt;
      &lt;div class="website-clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="portfolio-website"&gt;
      &lt;div class="website-thumbnail"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;&lt;img src="images/gridimg1.png" alt="BBC News"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-name"&gt;&lt;a href="http://www.envirogadget.com" target="_blank"&gt;EnviroGadget&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-url"&gt;&lt;a href="http://www.envirogadget.com" target="_blank"&gt;http://www.envirogadget.com&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-description"&gt;One of Dan's websites focusing on the best of eco-friendly gadgets.&lt;/div&gt;
      &lt;div class="website-clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="portfolio-website"&gt;
      &lt;div class="website-thumbnail"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;&lt;img src="images/gridimg1.png" alt="BBC News"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-name"&gt;&lt;a href="http://www.google.co.uk" target="_blank"&gt;Google&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-url"&gt;&lt;a href="http://www.google.co.uk" target="_blank"&gt;http://www.google.co.uk&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-description"&gt;The search engine that most people use.&lt;/div&gt;
      &lt;div class="website-clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="portfolio-website"&gt;
      &lt;div class="website-thumbnail"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;&lt;img src="images/gridimg1.png" alt="BBC News"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-name"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;BBC News&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-url"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;http://news.bbc.co.uk&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-description"&gt;A popular destination for up-to-date news in the UK and around the World.&lt;/div&gt;
      &lt;div class="website-clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="portfolio-website"&gt;
      &lt;div class="website-thumbnail"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;&lt;img src="images/gridimg1.png" alt="BBC News"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-name"&gt;&lt;a href="http://www.envirogadget.com" target="_blank"&gt;EnviroGadget&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-url"&gt;&lt;a href="http://www.envirogadget.com" target="_blank"&gt;http://www.envirogadget.com&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-description"&gt;One of Dan's websites focusing on the best of eco-friendly gadgets.&lt;/div&gt;
      &lt;div class="website-clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="portfolio-website"&gt;
      &lt;div class="website-thumbnail"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;&lt;img src="images/gridimg1.png" alt="BBC News"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-name"&gt;&lt;a href="http://www.google.co.uk" target="_blank"&gt;Google&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-url"&gt;&lt;a href="http://www.google.co.uk" target="_blank"&gt;http://www.google.co.uk&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-description"&gt;The search engine that most people use.&lt;/div&gt;
      &lt;div class="website-clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="portfolio-website"&gt;
      &lt;div class="website-thumbnail"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;&lt;img src="images/gridimg1.png" alt="BBC News"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-name"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;BBC News&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-url"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;http://news.bbc.co.uk&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-description"&gt;A popular destination for up-to-date news in the UK and around the World.&lt;/div&gt;
      &lt;div class="website-clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="portfolio-website"&gt;
      &lt;div class="website-thumbnail"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;&lt;img src="images/gridimg1.png" alt="BBC News"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-name"&gt;&lt;a href="http://www.envirogadget.com" target="_blank"&gt;EnviroGadget&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-url"&gt;&lt;a href="http://www.envirogadget.com" target="_blank"&gt;http://www.envirogadget.com&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-description"&gt;One of Dan's websites focusing on the best of eco-friendly gadgets.&lt;/div&gt;
      &lt;div class="website-clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="portfolio-website"&gt;
      &lt;div class="website-thumbnail"&gt;&lt;a href="http://news.bbc.co.uk" target="_blank"&gt;&lt;img src="images/gridimg1.png" alt="BBC News"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-name"&gt;&lt;a href="http://www.google.co.uk" target="_blank"&gt;Google&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-url"&gt;&lt;a href="http://www.google.co.uk" target="_blank"&gt;http://www.google.co.uk&lt;/a&gt;&lt;/div&gt;
      &lt;div class="website-description"&gt;The search engine that most people use.&lt;/div&gt;
      &lt;div class="website-clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  
  &lt;!-- &lt;div id="content"&gt;
  &lt;h2&gt;A random heading&lt;/h2&gt;
  &lt;p&gt;Content Placeholder ... &lt;/p&gt;
  &lt;p&gt;Content Placeholder ... &lt;/p&gt;
  &lt;p&gt;Content Placeholder ... &lt;/p&gt;
  &lt;p&gt;Content Placeholder ... &lt;/p&gt;
  &lt;p&gt;Content Placeholder ... &lt;/p&gt;
  &lt;p&gt;Content Placeholder ... &lt;/p&gt;
  &lt;p&gt;Content Placeholder ... &lt;/p&gt;
  &lt;p&gt;Content Placeholder ... &lt;/p&gt;
  &lt;p&gt;Content Placeholder ... &lt;/p&gt;
  &lt;p&gt;Content Placeholder ... &lt;/p&gt;
  &lt;p&gt;Content Placeholder ... &lt;/p&gt;
  &lt;p&gt;Content Placeholder ... &lt;/p&gt;
  
  &lt;/div&gt; --&gt;
  
  &lt;!-- Footer --&gt;
  
  &lt;div id="footer"&gt;
  Mindtale &amp;copy; 2013
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>style.css</p>
  
  <pre><code>html { 
  height:100%; /* fix height to 100% for IE */
  max-height:100%; /* fix height for other browsers */
  background: url(images/bg.jpg) no-repeat center center fixed; /* add background image */
  -webkit-background-size: cover; /* fix height for other browsers */
  -moz-background-size: cover; /* fix height for other browsers */
  -o-background-size: cover; /* fix height for other browsers */
  background-size: cover; /* fix height for other browsers */
  }
  
  /* Header */
  /* -------------------------------------------------- */
  
  
  
  div#header {
  z-index:3;
  position:fixed;
  background: url(images/header.png) no-repeat center;
  height: 102px;
  top:0px;
  left:0px;
  width:100%;
  padding: 0px;
  }
  
  div#headerfill {
  z-index:4;
  position:fixed;
  background: url(images/headerfill.png) repeat-x;
  height: 98px;
  top:0px;
  left:0px;
  width:100%;
  padding: 0px;
  }
  
  div#headerlink1 {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size:90%;
  z-index:4;
  position:fixed;
  top:55px;
  left:18%;
  color:#999;
  padding: 0px;
  }
  
  div#headerlink2 {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size:90%;
  z-index:4;
  position:fixed;
  top:55px;
  left:78%;
  color:#999;
  padding: 0px;
  }
  
  div#headerlogo {
  z-index:5;
  position:fixed;
  top:30px;
  left:42%;
  color:#999;
  padding: 0px;
  }
  
  /* Content */
  /* -------------------------------------------------- */
  
  div#content {
  position:fixed;
  width:100%;
  color:#222;
  top: 70px; 
  bottom: 0; 
  left: 0; 
  right: 0;
  padding: 25px;
  overflow: auto;
  
  
  
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  
  }
  
  
  /* Footer */
  /* -------------------------------------------------- */
  
  div#footer {
  position:fixed;
  bottom:0px;
  left:0px;
  width:100%;
  color:#999;
  background:#333;
  padding: 8px;
  }
  </code></pre>