页脚总是在底部没有 display:fixed

Question

我想让我的页脚始终显示在页面底部，即使内容没有填满页面，但是当内容填满页面时我希望它只在我滚动到最底部时显示这一页。我正在考虑检查页面是否可以使用 JavaScript 滚动，如果不能，我将添加一个 class 来固定页脚，如果可以，我将删除 class，但我没有不知道如何用 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

我之前用的方案是this sticky footer

需要知道页脚高度，最重要的部分是 body 高度和具有最小高度和负边距底部的包装器。

Answer 2

像在代码中一样获取文档高度和其他内容高度

//$(".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 3

对于不依赖于固定高度的仅 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 4

只需在页脚上方的 "containter" 元素中设置最小高度。

min-height: 100%

将页脚位置设置为绝对位置。

这是一个例子：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

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

页脚总是在底部没有 display:fixed

Footer always on the boottom without display:fixed

html

css

jquery

sticky

footer