Нижний колонтитул всегда на буттоме без дисплея: исправлено

Question

Я хочу, чтобы мой нижний колонтитул отображался всегда в нижней части страницы, даже когда содержимое не заполняет страницу, но когда содержимое заполняет страницу, я хочу, чтобы она отображалась только тогда, когда Я прокручиваю до самой нижней части страницы. Я думал проверить, можно ли прокручивать страницу с помощью JavaScript, и если нет, я добавлю класс, чтобы сделать нижний колонтитул исправленным другим, если да, плохо удалить этот класс, но я не знаю, как это проверить с помощью JavaScript. Идея в том, что я хочу, чтобы мой нижний колонтитул фиксировался, когда я не могу прокрутить, и когда я могу прокручивать, я не хочу, чтобы это исправлено. Как я могу это сделать ? Мой колонтитула HTML является:

<footer class="smallFooter"> 
      <p> @EDUARDVALENTIN 2015 </p> 
      <a href="https://www.facebook.com/danadesignsartoria?fref=ufi"><img src="img/fb-logo.png" /></a> 
      <a href="#"><img src="img/instagram-logo.png" /></a> 
      <a href="https://www.youtube.com/channel/UCqe4oWvPuSP8kTL70V1P9Gg/feed"><img src="img/yt-logo.png" /></a> 
      <a href="https://twitter.com/SartoriaAsti"><img src="img/twitter-logo.png" /></a> 
     </footer> 

И CSS:

.smallFooter{ 
    bottom:0; 
    width:100%; 
    position:fixed; 
    height:35px; 
    background-color:#0E0E0E ; 

} 



.smallFooter p{ 
    position:absolute; 
    display: inline-block; 
    box-sizing:border-box; 
    color:white; 
    font-size:10px; 
    float:left; 

} 


footer img{ 
    width:25x; 
    height:25px; 
    display:inline-block; 
    float:right; 
    margin-right:3%; 
    padding-top:8px; 

} 

Answer 1

Просто установите мин-высота в вашем элементе "containter" над футере.

min-height: 100% 

Установить положение нижнего колонтитула как абсолютное.

Вот пример: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Answer 2

Решение я использовал перед this sticky footer

Высота колонтитула должно быть известно, и наиболее важные фигуры рост и обертка с минимальной высотой и отрицательным краем.

Answer 3

высота Получить документ и другие материалы по высоте, как в коде

//$(".site_wrapper").height() -> Content height which is your center warraper 
//$(".header_wrapper").height() -> header wrapper height 
//$(".header_wrapper").height() -> footer warpper height 
//$(".site_wrapper").height() -> your complete page's wrraper 
$(document).ready(function(){ 
if($(document).height() > $(".site_wrapper").height()){ 
      var dHeight = $(document).height(); 
      var fHeight = $(".footer_warpper").height(); 
      var hHeight = $(".header_wrapper").height(); 
      var height = dHeight - (fHeight + hHeight) - 50; //adjust 50 +/- according to your page 
      $(".main_table").css("height",height); 
     } 
}); 

Answer 4

За CSS-единственное решение, которое не зависит от фиксированной высоты, используйте display: table.

CSS

html, body { 
    height: 100%; 
} 
body { 
    display: table; 
    width: 100%; 
} 
.content { 
    display: table-row; 
    height: 100%; 
} 
.smallFooter { 
    display: table-row; 
    height: 1px; 
} 

HTML

<div class="content"> 
    <p>Main content goes here.</p> 
</div> 
<footer class="smallFooter"> 
    <p>Footer content goes here</p> 
</footer> 

в действии с this fiddle

Answer 5

**HTML** 
<div class="mydiv"> 
    Suspendisse potenti. 
</div> 

<footer class="smallFooter"> 
     <p> @EDUARDVALENTIN 2015 </p> 
     <a href="https://www.facebook.com/danadesignsartoria?fref=ufi"><img src="img/fb-logo.png" /></a> 
     <a href="#"><img src="img/instagram-logo.png" /></a> 
     <a href="https://www.youtube.com/channel/UCqe4oWvPuSP8kTL70V1P9Gg/feed"><img src="img/yt-logo.png" /></a> 
     <a href="https://twitter.com/SartoriaAsti"><img src="img/twitter-logo.png" /></a> 
    </footer> 

CSS

html,body{ 
height:100%; 
padding:0; 
margin:0; 
} 
.mydiv{ 
    background : red; 
} 
.smallFooter{ 
width:100%; 
height:35px; 
background-color:#0E0E0E ; 
position:relative; 
} 



.smallFooter p{ 
position:absolute; 
display: inline-block; 
box-sizing:border-box; 
color:white; 
font-size:10px; 
float:left; 

} 


footer img{ 
width:25x; 
height:25px; 
display:inline-block; 
float:right; 
margin-right:3%; 
padding-top:8px; 

} 

JS

$(".mydiv").css({"min-height":($("body").outerHeight()-$(".smallFooter").outerHeight())}); 

Вы можете попробовать что-то вроде этого, а также с помощью немного Jquery. Помогает ли это? Соберите тело на полную высоту, а оставшееся содержимое возьмет то, что осталось.

http://jsfiddle.net/53hf73nL/1/ если есть много контента http://jsfiddle.net/53hf73nL/2/ если есть немного контента.