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

Posted 2023-03-21

【中文标题】页脚总是在底部不显示：固定

【英文标题】：Footer always on the boottom without display:fixed

【发布时间】：2015-11-14 11:27:09

【问题描述】：

我想让我的页脚始终显示在页面底部，即使内容没有填满页面，但是当内容填满页面时，我希望它仅在我滚动到页面的最底部时显示. 我正在考虑检查页面是否可以使用 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;

【问题讨论】：

你可以在身上使用min-height。

添加您的页面 html，包括页眉正文内容和页脚

签出this。

How do you get the footer to stay at the bottom of a Web page?的可能重复

【参考方案1】：

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

min-height: 100%

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

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

【参考方案2】：

我之前用过的解决方案是this sticky footer

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

【参考方案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);
        
);

【讨论】：

如果要使用它，它可能应该绑定到窗口调整大小，但这也是根本不需要 JS 的东西，除非做一些非常复杂的事情。

【参考方案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查看它的实际应用

【参考方案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/内容不多的时候。