logo标签列表

CSS：如何将页脚固定在页面底部

htmlcss
6

我希望将页脚固定在页面底部。为此，我使用了 CSS 中的绝对定位，就像其他类似主题中推荐的一样。但出现了未知原因导致页脚表现得像是 Fixed 而不是 Absolute。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
}

header {
  background: rgba(150, 150, 150, 0.5);
  border-bottom: solid 1px;
  width: 100%;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

main {
  padding-top: 5px;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 60px;
}

footer {
  border-top: solid 1px;
  background: rgba(150, 150, 150, 0.5);
  width: 100%;
  height: 40px;
  padding-top: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <title>Index</title>
</head>

<body>
  <header>
    This is header
  </header>

  <main>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
  </main>

  <footer>
    This is footer
  </footer>
</body>

</html>

屏幕1：输入图像描述 屏幕2：输入图像描述

页脚应该保持与页面底部粘合，但它仍然与浏览器底部粘合。出了什么问题？

1
为什么不直接使用 position: relative？ - Tom
请查看此链接：http://plnkr.co/edit/o5aTdu4iLGSVIWxi3sUu。只需删除三个CSS规则，让页脚自然地移动到页面底部。 - Bramastic
2
@thebluefox 因为如果内容不填满屏幕，那么页脚就不会在视口底部，我认为 OP 想要一个粘性页脚，它将位于内容或屏幕底部，以较大者为准。 - Pete
@Pete，我错过了那个要求 - 下面有一个很好的答案。 - Tom
@sva605 尽管我下面的答案回答了这个问题，但它可能会给你带来问题，因为你需要为页脚的高度添加底部填充（否则你的页脚可能会重叠一些内容）- 请参见此答案，根据您需要支持的浏览器，提供了一些很好的替代方法来实现粘性页脚。 - Pete
4个回答
8

您在body上设置了100%的高度，因此您的body高度将永远与视口一样高。尝试为body使用min-height（还需在body上添加相对位置）：

html {
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
}

header {
  background: rgba(150, 150, 150, 0.5);
  border-bottom: solid 1px;
  width: 100%;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

main {
  padding-top: 5px;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 60px;
}

footer {
  border-top: solid 1px;
  background: rgba(150, 150, 150, 0.5);
  width: 100%;
  height: 40px;
  padding-top: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <title>Index</title>
</head>

<body>
  <header>
    This is header
  </header>

  <main>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
  </main>

  <footer>
    This is footer
  </footer>
</body>

</html>

5
如果您可以使用Flexbox，则这是您的解决方案。在css tricks上查看-您不需要更多。 https://css-tricks.com/couple-takes-sticky-footer/
HTML:
<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS：

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
1
这是正确的答案。 - onlycparra
0

我发现最好的方法是通过flex来实现。

确保body/root或任何100%容器都是display:flex，您可以使用flex-direction:column根据CSS的其余部分使其更或少有影响。

完成后，可以通过类似以下方式创建页脚容器-

<div id="footer">
   <span>my footer text </span>
<div>

现在将此容器列也设置为 flexbox，使用 flex-grow:2 确保它将占用所有剩余的垂直空间。然后将内容对齐到 flex end，使其粘贴在底部。
#footer {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-grow: 2;
}

这样可以确保如果内容没有占满整个高度，页脚会停留在底部。如果内容大于视口高度，则会滚动并停留在内容末尾而不会有额外的空间。

所有东西一起 -

html {
  height:90% /* quiriness of iframe used here */
}

body {
  height:100%;
  display:flex;
  flex-direction: column;
}

#footer {
  display:flex;
  flex-direction:column;
  flex-grow:2;
  justify-content:flex-end;
}
<div>
  Hello World
</div>


<div id="footer">
  <span>my footer<span>
</div>

0

不需要为页脚指定位置，同时去掉底部和左侧。您需要指定每个部分的高度（以％为单位）。请尝试以下CSS：

html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}

header {
 height:10%;
 background: rgba(150,150,150,0.5);
 border-bottom: solid 1px;
 width: 100%;
 text-align: center;
 padding-top: 20px;
 padding-bottom: 20px;
}

main {
height:80%;
padding-top: 5px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 60px;
}

footer {
height:10%;
border-top: solid 1px;
background: rgba(150,150,150,0.5);
width: 100%;
height: 40px;
padding-top: 10px;
text-align: center;   
}

如果屏幕尺寸很大，或者有人缩小了屏幕，或者页面内容非常少，页脚将始终保持在页面底部。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接