Question

我有一个在我的网络应用程序中使用的页脚，如果内容小于屏幕大小，我需要它显示在屏幕底部，但如果内容较大（但我需要，则不要粘贴）只有在内容大于屏幕尺寸的情况下向下滚动才能看到它

我发现多个问题和主题分别讨论，但不是一起讨论。

Answer 1

你在这里：

＆＃13;

head, body {
  height: 100%;
  padding-bottom: 40px;
  position: relative;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: gray;
  padding: 10px;
  text-align: center;
}

＆＃13;

<h1>awesome page</h1>
<p>awesome content</p>
<div class="footer">
  awesome footer
</div>

＆＃13;

Answer 2

将主体或包含元素设置为最小高度为100vh，然后将页脚绝对放置在元素的底部：

＆＃13;

.container {
  min-height: 100vh;
  background: firebrick;
  position: relative;
}

footer {
  background: lime;
  box-sizing: border-box;
  padding: 20px;
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
}

＆＃13;

<div class="container">
  <footer></footer>
</div>

＆＃13;

Answer 3

你可以使用flexbox：

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        min-height: 100%;
      }
      .all {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100%;
        background-color: yellow;
      }
      .content {
        background-color: red;
      }
      .footer {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="all">
      <div class="content">
        Content...
      </div>
      <div class="footer">
        Footer...
      </div>
    </div>
  </body>
</html>

使页脚粘在底部而不会粘住

3 个答案: