Bootstrap Нижний колонтитул

Question

Я знаю, что есть тысячи Тем, о нижних колонтитулах, но я все еще не могу сделать это, я много пробовал, но ничего не помогло ..... Нижний колонтитул всегда должен быть внизу страницы, видимой только когда я просматриваю контент. Надеюсь, у кого-нибудь появятся предложения!

Это мой сноска:

<div class="wrap"> 
...... 
</div> 
<div class="footer"> 
     <div class="container"> 
     <div class="col-sm-4"> 
      <img class="menu-icon" src="img/other/user.png"><h11>Account</h11> 
      <ul class="unstyled"> 
      <li><a href="#" style="color: #909090;">ddd</a></li> 
      <li><a href="#" style="color: #909090;">ddd</a></li> 
      </div> 
      <div class="col-sm-4"> 
      <img class="menu-icon" src="img/other/gear.png"><h11>Support</h11> 
      <ul class="unstyled"> 
      <li><a href="#" style="color: #909090;">ddd</a></li> 
      <li><a href="#" style="color: #909090;">ddd</a></li> 
      <li><a href="#" style="color: #909090;">ddd</a></li> 
      <li><a href="#" style="color: #909090;">ddd</a></li> 
      </div> 
      <div class="col-sm-4"> 
      <img class="menu-icon" src="img/other/share.png"><h11>Share Us</h11> 
      <ul class="unstyled"> 
      <li><a href="#" style="color: #909090;"><img class="menu-icon" src="img/other/tw.png">Twitter</a></li> 
      <li><a href="#" style="color: #909090;"><img class="menu-icon" src="img/other/fb.png">Facebook</a></li> 
      <li><a href="#" style="color: #909090;"><img class="menu-icon" src="img/other/gp.png">Google Plus</a></li> 
      </div> 
     </div> 
     </div> 

CSS:

html, 
body { 
    height: 100%; 
} 
.wrap { 
height: auto !important; 
    min-height: 100%; 
} 
.footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height: 140px; 
    background-color: #222; 
} 

Answer 1

Проверьте ниже ссылку работает с вами.

Fiddle

#footer { 
position: relative; 
background-color: darkcyan; 
color: white; 
z-index: 1; 

}

Answer 2

Im не 100% уверен, что вы пытаетесь для того чтобы достигнуть. но я подозреваю, что ошибка может быть в вашем css.

вы используете: position:absolute; И если вы хотите, чтобы ваша сноску придерживаться нижней части содержания, вы не должны должны манипулировать элемент использовать абсолютное позиционирование.

С этим вопросом вы столкнулись? Этот пример использует position:absolute, как предлагает ваш код. https://jsfiddle.net/pvwLu49x/1/

Это то, что вы пытаетесь сделать?

https://jsfiddle.net/pvwLu49x/2/