HTML Нижний колонтитул ниже всего содержимого

Question

Im, пытаясь получить нижний колонтитул в нижней части моей страницы, я получил часть, где находится ее нижняя часть моей страницы, но теперь ее совпадение с моей областью содержимого называется «список портфолио» как это выглядит сейчас:

Как вы можете видеть, мой нижний колонтитул перекрывает нижнюю часть моего списка портфолио. 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

Попробуйте использовать нижний колонтитул {position: relative; }, как сказал Матей Шакович. Но также важно, чтобы #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; 
}