【问题标题】:How to make a footer stick to the bottom of the page如何使页脚粘在页面底部
【发布时间】:2023-04-01 17:56:02
【问题描述】:

我已阅读有关如何在网页底部制作页脚的所有教程,但我仍然无法为我的网站制作。

我提到的链接是

都没有用..!

CSS

#footer1 {
clear: both;
background-color: #333;
width: 1200px;
min-width: 100%;
width: 100%;
bottom: 0;
position: relative;
height: 50px;
border-top:5px solid #1b9bff;
}

这是我网站的虚拟小提琴

Fiddle

这是我尝试过的小提琴,但其中也有一个错误

  1. http://jsfiddle.net/andresilich/fVpp2/1/

【问题讨论】:

标签: html css footer


【解决方案1】:

按照this method 的代码 - 您需要:

1) 将页脚放在表单外

2) 添加高度:表单上的 100%

3) 根据页脚的高度设置负底边距。

form {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -150px; /*footer 150px high */
}

Modified Fiddle

【讨论】:

    【解决方案2】:

    添加/编辑如下

    #body {
    margin-bottom: 85px;
    position: relative;
    }
    
    #footer1 {
    position: fixed;
    }
    


    我想这就是你想要的

    * html #form1 {
        height:100%; 
    }
    
    #form1 {
        min-height: 100%;
        position: relative;
    }
    
    #body {
        padding-bottom: 50px; /* padding-bottom should be equal to the footer height (this keeps the footer from overlapping the content) */
    }
    
    #footer1 {
        position: absolute;
        width: 100%;
        clear: both;
        bottom: 0;
        padding: 0;
        margin: 0;
    }
    

    【讨论】:

    • 我不希望页脚被固定,我希望它在页面底部
    • 我没听懂你的意思,页面底部的页脚?您的意思是无论滚动位置如何,页脚每次都应该位于页面底部?
    【解决方案3】:

    试试这个:

    <div id="container">
      <div id="content"></div>
    </div>
    <div id="footer">My Sticky Footer</div>
    

    CSS:

    html, body, #container { height: 100%; }
    body > #container { height: auto; min-height: 100%; }
    
    #footer {
       clear: both;
       position: relative;
       z-index: 10;
       height: 3em;
       margin-top: -3em;
    }
    
    #content { padding-bottom: 3em; }
    

    【讨论】:

    • 如果你想使用它,你还应该在正文中添加一个等于页脚高度的填充
    • 我不希望页脚被固定,我希望它位于网页底部..!!
    • 嘿,这在我的情况下不起作用..! :( 感谢您的宝贵时间..!
    猜你喜欢
    • 2013-09-26
    • 2011-06-30
    • 1970-01-01
    • 2016-05-01
    • 2012-10-19
    相关资源
    最近更新 更多