Question

我想修改屏幕底部的页脚，就像屏幕高度增加或减少一样，它会出现在屏幕的底部，它永远不会比屏幕高度短吗？

HTML

<div class="footer">

<p> <a href="../info/about.php">About </a><a href="../info/help.php">Help </a><a href="../info/terms.php">Terms </a><a href="../info/privacy.php">Privacy </a><a href="../info/advertise.php">Advertise</a><a> - </a>@2016 webste</p>

    </div>

CSS

.footer {
background-color:#fafafa;
 text-align: center;
 height:30px;
 margin-top:10%;
}

.footer p {
color: #3c4a50;
line-height: 25px;
    font-size: 13.3333px;
    font-family: Arial;
}

.footer a {
color: #3c4a50;
text-decoration: none;
    font-size: 13.3333px;
    line-height: normal;
    padding-right:0.5%;
}

.footer a:hover {
color: #252d31;
font-size:95%;
}

Answer 1

添加此css

.footer {
    position: fixed;
    bottom: 0;
}

Answer 2

你有没有尝试过：

.footer {
 background-color:#fafafa;
 text-align: center;
 height:30px;
 position:fixed;
 bottom:0;
 left:0;
 width:100%;
}

Answer 3

JS小提琴链接 -

https://jsfiddle.net/e1oywpov/

只需添加，位置：固定和底部：0px，然后它将保留在底部

.footer {
background-color:#fafafa;
 text-align: center;
height:30px;
margin-top:10%;
bottom:0px;
position:fixed
}

Answer 4

你可以添加以下CSS＆amp;同时添加z-index

.footer {
    position: fixed;
    z-index: 1;
    bottom: 0;
}

如何修复屏幕底部的页脚？

4 个答案: