Как остановить контент из под нижнего колонтитула

Question

Привет всем, что я сделал для моего веб-сайта, но у меня, похоже, возникают проблемы, когда я добавляю новый контейнер и говорю, что я установил высоту на 500 пикселей по кругу нижнего колонтитула нижний, пожалуйста, проверьте изображение

Мой колонтитул CSS

.footer { 
    height: 200px; 
    border-top: 1px solid #d8d8d8; 
    position: relative; 
    bottom: 0; 
} 
.footer li { 
    text-decoration: none; 
    font-weight: bold; 
    list-style-type: none; 
    padding: 0; 
    margin-left: 0; 
    margin-top: 2px; 
} 
.footer h4 { 
    font-weight: bold; 
    margin-top: 30px; 
} 
* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -4em; 
} 
.footer, .push { 
    height: 200px; 
    clear: both; 
} 
.more-info { 
    border-top: 1px solid #d8d8d8; 
    position: relative; 
    bottom: 0; 
} 
.more-info p { 
    font-weight: bold; 
} 

HTML

<div class="footer"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-sm-6"> 
        <h4>Links</h4> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="courses.html">Courses</a></li> 
        <li><a href="sign-up.html">Sign Up</a></li> 
        <li><a href="log-in.html">Log In</a></li> 
        <li><a href="about.html">About</a></li> 
       </div> 

       <div class="col-sm-6"> 
        <h4>Social Media</h4> 
        <li><a href="#">Facebook</a></li> 
        <li><a href="#">Twitter</a></li> 
        <li><a href="#">Youtube</a></li> 
        <li><a href="#">Instagram</a></li> 

       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Я думаю, что это потому, что у вас есть отрицательное нижнее поле на вашем .wrapper. Вы можете попробовать изменить его на:

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto; 
}