页脚总是在底部不显示：固定

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

只需在页脚上方的“容器”元素中设置 min-height。

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/内容不多的时候。