HTML頁腳底部下所有內容

Question

我試圖讓我的頁腳在我的頁面底部，我得到的部分在我的網頁的底部，但現在它與我的內容區域稱爲「投資組合列表」這個重疊是現在看起來像：

正如你可以看到我的頁腳重疊我的投資組合列表的底部。 CSS部分：

.container { 
    position: relative; 
    width: 1000px; 
    margin: 0 auto; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
} 
#portfoliolist .portfolio { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    width:31%; 
    margin:1%; 
    display:none; 
    float:left; 
    overflow:hidden; 
} 

    .portfolio-wrapper { 
     overflow:hidden; 
     position: relative !important; 
     background: #666; 
     cursor:pointer; 

    } 

    .portfolio img { 
     max-width:100%; 
     position: relative; 
    } 

    .portfolio .label { 
     position: absolute; 
     width: 100%; 
     height:40px; 
     bottom:-40px; 
    } 

     .portfolio .label-bg { 
      background: #121212; 
      width: 100%; 
      height:100%; 
      position: absolute; 
      top:0; 
      left:0; 
     } 

     .portfolio .label-text { 
      color:#fff; 
      position: relative; 
      z-index:500; 
      padding:5px 8px; 
     } 

      .portfolio .text-category { 
       display:block; 
       font-size:9px; 
      } 


footer{ 
    position:absolute; 

    bottom:0; 
    width:100%; 
    height:100px; /* Height of the footer */ 
    background:#121212; 

} 

HTML：

<div id="portfoliolist"> 
      <?php 
       while($query->fetch()): 


       echo "<a href='post.php?id=$post_id'>"?> 
      <div class="portfolio <?php echo $category?>" data-cat="<?php echo $category?>"> 
       <div class="portfolio-wrapper">   
        <?php echo '<img src="data:image/jpeg;base64,'.base64_encode($image).'" />';?> 
         <div class="label"> 
          <div class="label-text"> 
           <a class="text-title"><?php echo $title?></a> 
            <span class="text-category"><?php echo $category?></span> 
          </div> 
           <div class="label-bg"></div> 
         </div> 
       </div> 
      </div> 
      <?php echo "</a>"; 
        endwhile;?> 
      </div> 

      <footer> 
       <div class="footer-nav"> 
       <ul> 
        <li><a href="#">Facebook</a></li> 
        <li><a href="#">Twitter</a></li> 
        <li><a href="#">DeviantArt</a></li> 
        <li><a href="#">Behance</a></li> 
        <li><a href="#">LinkedIn</a></li> 
       </ul> 
       </div> 
      </footer> 

這些div的是在我的容器的兩個。我希望有人能幫助我！

Answer 1

嘗試使用footer {position：relative; }像MatejĐaković說。 但同樣重要的是，#portfoliolist清除.portfolio的浮動，否則#portfoliolist沒有高度。

#portfoliolist:after { 
    content: ' '; 
    display: block; 
    clear: both; 
} 

Answer 2

您應該爲頁腳位置：position: fixed;並設置爲z-index: 9999;頁面沒有頁腳中的剩餘部分。這樣，頁腳始終停留在底部，頁面的其餘部分位於底部。也許你應該把投資組合的保證金底部設置爲頁腳的高度。這應該這樣做我認爲

也爲頁面的其餘部分設置position: relative;。這裏的快速codepen我做http://codepen.io/oroborus357/pen/qdXdBw

Answer 3

嘗試使用：

footer{ 
    position:absolute; 
    bottom:0; 
    right: 0; 
    left:0; 
    height: 125px; 
    background:#121212; 
} 

如果不只是添加到您的內容（投資組合列表），並設置底部頁腳的起步階段，所以這將是bottom: 125px;或bottom: 126px;

{ position:absolute; 
     bottom:125px; 
     right: 0; 
     left:0; 
}