如何讓我的頁腳隨着內容移動（使其具有響應性）？

Question

我怎樣才能制作我的頁腳

1. 當沒有任何內容可滾動時，位於底部。
2. 內容較多時移動。

到目前為止，我有以下 CSS 代碼：

    * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    font-size: 150%;
    color: white;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.footer-link a {
    color: #5f5f79;
    font-size: 87.5%;
    text-decoration: none;
}
.footer-link {
    margin: 0px 60px;
}
.copy {
    color: #5f5f79;
    font-size: 87.5%;
    margin-top: 5px;
}

...還有HTML：

<div class="footer">
        <p class="footer-link"><a href="impressum.html">Impressum</a></p>
        <p class="copy">Coypright 2020</p>
        <p class="footer-link"><a href="datenschutz.html">Datenschutz</a></p>
      </div>

我真的希望你能幫助我:)

Answer 1

您可以進行以下更改：

.footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    font-size: 150%;
    color: white;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

但是你需要確保頁腳的容器元素有一個padding-bottom: 70px; - 意味着容器用等於頁腳高度的像素填充內容。 這樣頁腳就不會覆蓋任何內容。

也許你可以使用jsfiddle把你所有的代碼都放進去。這樣我們可以更好地幫助你。

如果這有幫助，請告訴我。

Answer 2

您必須更改 HTML 結構。 您需要制作一個包裝 div，您的頁腳和內容將位於其中。

您希望通過使用position: absolute並在包裝器 div 中保持padding-bottom: footer-height將頁腳固定在包裝器padding-bottom: footer-height 。

 * { margin: 0px; padding: 0px; box-sizing: border-box; } .wrapper{ position: relative; border:5px solid black; min-height: 100vh; padding-bottom: 70px; } .other-content{ border:5px solid red; font-size: 34px; } .footer { position: absolute; bottom: 0; width: 100%; font-size: 150%; color: white; height: 70px; display: flex; align-items: center; justify-content: center; } .footer-link a { color: #5f5f79; font-size: 87.5%; text-decoration: none; } .footer-link { margin: 0px 60px; } .copy { color: #5f5f79; font-size: 87.5%; margin-top: 5px; }

 <div class="wrapper"> <div class="other-content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis vero maiores odio nulla voluptas, officiis numquam modi ipsa reiciendis eos quae vel magnam doloremque, et culpa recusandae sint animi iste. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi unde similique quis reiciendis recusandae est dignissimos. Commodi porro reprehenderit ex ipsum, ullam excepturi adipisci quod, numquam nulla praesentium delectus magni!</div> <!-- other content --> <div class="footer"> <p class="footer-link"><a href="impressum.html">Impressum</a></p> <p class="copy">Coypright 2020</p> <p class="footer-link"><a href="datenschutz.html">Datenschutz</a></p> </div> </div>