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; 
}