Question

我的网站页面中的一个页面底部没有显示页脚。我已经完成了一些页面，并且使用相同的代码可以很好地工作，但是我不知道为什么此页面无法正常工作。这是页脚的HTML代码（我想从Font Awesome中显示社交媒体图标）：

<footer>
<div class="fa">
    <a class="media" href="https://www.instagram.com/massaviu/" target="_blank">
        <i class="fab fa-instagram grow" style="color: #E1306C"></i>
    </a>
    <a class="media" href="https://www.youtube.com/channel/UCh1_-QpgzIdG-3QfCMfZi6w" target="_blank">
        <i class="fab fa-youtube grow" style="color: #FF0000"></i>
    </a>
    <a class="media" href="https://open.spotify.com/artist/0du3FPmKtQ8vfsmGYVzdFY" target="_blank">
        <i class="fab fa-spotify grow" style="color: #1DB954"></i>
    </a>
    <a class="media" href="https://music.apple.com/us/artist/massaviu/1378812000" target="_blank">
        <i class="fab fa-apple grow" style="color:  #A3AAAE"></i>
    </a>
</div> </footer>

这是我已经在实际工作的不同页面中使用过的CSS，但在此页面中却没有：

footer {  text-align: center;  bottom: 0;}

.media {    display: inline-block;  width: 60px; height: 90px;  margin: 10px;}

.media i {  color: white;   font-size: 50px;}

.media:hover i {    opacity: 0.7;}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.3); }

Answer 1

尝试这个flex css3示例可能会对您有所帮助。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            min-height: 100vh;
            display: flex;
            margin: 0;
            padding: 0;
            flex-wrap: wrap;
        }

        section {
            width: 100%;
            height: auto;
        }

        footer {
            background: #000;
            text-align: center;
            color: #fff;
            display: flex;
            align-self: flex-end;
            width: 100%;
            justify-content: center;
        }

    </style>
</head>

<body>


    <section>this is body section</section>
    <footer>this is footer</footer>
</body>

</html>

Answer 2

我可以看到您使用了bottom:0而不使用绝对位置或固定位置。请确保bottom属性在位置方面起作用。

Answer 3

bottom: 0仅与position: absolute，position: relative，position: fixed或position: sticky结合使用。

您想要position: absolute。这将以整个页面/文档为基础，让您指定元素相对于元素的位置。

所以尝试一下：

footer { text-align: center;  bottom: 0; position: absolute; }

有关此主题的更多信息： https://www.w3schools.com/css/css_positioning.asp

Answer 4

将页脚CSS更改为以下

footer {  text-align: center;  bottom: 0; position:fixed}

.media {    display: inline-block;  width: 60px; height: 90px;  margin: 10px;}

.media i {  color: white;   font-size: 50px;}

.media:hover i {    opacity: 0.7;}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.3); }

您也可以尝试将位置设为绝对位置。

为什么我的页脚没有显示在页面底部？

4 个答案: