13

我有一个非常基本的 HTML 页面。代码如下所示：

<body>
  <header style="min-height: 255px;">
  </header>

  <article style="padding-bottom: 60px; width: 900px; margin: 0 auto;">
    Body text goes here.
  </article>

  <footer style="position: absolute; bottom: 0px; width: 100%; height: 60px; background-color: black;">
    Copyright information
  </footer>
</body>

通常，我的正文相当大。文本足够大，需要滚动条。看起来页脚位于底部的文本顶部。然后，当我向下滚动时，页脚不会保持固定。我究竟做错了什么？

谢谢

4

5 回答 5

20

您需要position:fixed;在页脚中：

<body>
  <header style="min-height: 255px;">
  </header>

  <article style="padding-bottom: 60px; width: 900px; margin: 0 auto;">
    Body text goes here.
  </article>

  <footer style="position: fixed; bottom: 0px; width: 100%; height: 60px; background-color: black;">
    Copyright information
  </footer>
</body>
于 2012-12-09T14:40:52.080 回答
7

将页脚更改position: absolute为position: fixed.

http://jsfiddle.net/SUQuX/

为什么？这解释了它们的不同之处https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/我认为在你的情况下，问题是absolute元素附着在身体上，因此它将随着身体滚动。

于 2012-12-09T14:37:54.160 回答
4

使用position: fixed而不是position: absolute.

<footer style="position: fixed;">

为什么？这解释了它们的不同之处https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/我认为在你的情况下，问题是绝对元素附着在身体上，因此它会随着身体滚动。

于 2012-12-09T14:42:34.437 回答
0

我写这个答案是因为我认为它可能会在未来帮助某人。height即使在定义了页脚和margin-bottom正文之后，我也面临一个问题。问题是，如果您有响应式网站，其中页脚的高度会根据屏幕尺寸动态变化，您将有内容重叠。为了解决这个问题，我使用了 jQuery——除了页脚和页脚之外，margin-bottom保持所有设置相同。bodyheight

var footerHeight = $('#main_footer').outerHeight(); // get the footer height excluding margin
    $('#main_footer').css('height', footerHeight + "px");
    $('body').css('margin-bottom', footerHeight + 10 + "px");

即使页脚高度发生变化并且不会有重叠内容，这将始终将页脚保持在底部。

于 2016-09-14T15:48:11.533 回答
0

使用 flexbox 是另一种方式，非常适用于响应式页面布局。

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    margin: 0;
}

header {
    background-color: darkslategray;
    color: teal;
    padding: 0 15px;
}

section#main {
    flex: 1;
    overflow-y: auto;
    background-color: teal;
    color: aquamarine;
    padding: 0 15px;
}

footer {
    background-color: darkslategray;
    color: teal;
    padding: 5px 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" Paragraph="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="site.css">
</head>
<body>
    <header>
        <h1>
            Header
        </h1>
    </header>
    <section id="main">
        <h2>Section</h2>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <p>Paragraph 3</p>
        <p>Paragraph 4</p>
        <p>Paragraph 5</p>
        <p>Paragraph 6</p>
        <p>Paragraph 7</p>
        <p>Paragraph 8</p>
        <p>Paragraph 9</p>
        <p>Paragraph 10</p>
        <p>Paragraph 11</p>
        <p>Paragraph 12</p>
        <p>Paragraph 13</p>
        <p>Paragraph 14</p>
        <p>Paragraph 15</p>
        <p>Paragraph 16</p>
        <p>Paragraph 17</p>
        <p>Paragraph 18</p>
        <p>Paragraph 19</p>
        <p>Paragraph 20</p>
    </section>
    <footer>
        Footer
    </footer>
</body>
</html>

于 2022-02-18T12:11:40.477 回答