如何将页脚放在页尾？

Question

我不希望它固定在底部，我只希望它在最后，即使页面没有内容。

如您所见...问题所在：

我在 google 上搜索过它，我试着放一些 CSS 比如：

footer {
    bottom: 0;
    position: absolute;
    width: 100%;
}

但是没有用。

<!-- Footer -->
<footer class="page-footer font-small teal pt-4 bgFooter rodape">

    <!-- Footer Text -->
    <div class="container-fluid text-center text-md-left">

      <!-- Grid row -->
        <div class="row">

        <!-- Grid column -->
            <div class="col-md-12 text-center mt-md-0 mt-3 text-light" style="font-family: 'Quicksand', sans-serif;">

              <!-- Content -->
                <h5 class="text-uppercase pb-3">Social</h5>

                <div class="mb-4">

                    <a class="btn btn-outline-danger pl-3 pr-3" href="" target="_blank"><i class="fab fa-facebook-f"></i></a>

                    <a class="btn btn-outline-danger ml-3 mr-3" href="" target="_blank"><i class="fab fa-twitter"></i></a>

                    <a class="btn btn-outline-danger" href="" target="_blank"><i class="fab fa-instagram"></i></a>

                </div>

            </div>

        </div>
      <!-- Grid row -->

    </div>
    <!-- Footer Text -->

    <!-- Copyright -->
    <div class="footer-copyright text-center text-light small ml-2 py-3" style="font-family: 'Quicksand', sans-serif;">© 2018 Teste |
        <a href="?p=privacidade" class="linkPolitica" style="font-family: 'Quicksand', sans-serif;"> Política de privacidade</a>
    </div>
    <!-- Copyright -->

</footer>
  <!-- Footer -->

Answer 1

我没有你的代码，但一个好的解决方案是首先将你的 body 最小高度设置为页面的 100%。然后将页眉设置为 x%，页脚设置为 y%，页面内容的最小高度设置为 100-(x+y)%。
示例代码：

HTML :

<body>
    <header>
    </header>

    <main>
    </main>

    <footer>
    </footer>
</body>

CSS:

html {
    min-height: 100%;
}
body {
    display: inline-block;
    min-height: 100%;
}
header {
    height: 10%;
    display: inline-block;
}
footer {
    height: 10%;
    display: inline-block;
}
main {
    min-height: 80%; 
    display: inline-block;
}

希望对您有所帮助 ;)

Answer 2

您只需为 html 和 body 设置 min-height: 100%，如下所示：

html, body {
    min-height: 100%;
}

Answer 3

尝试使用 css 网格，检查此示例：

HTML

<header>
</header>
<main>
</main>
<footer>
</footer>

CSS

html, body {
  width: 100%;
  height: 100%;
 margin:0;
 padding:0;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
}

header {
  background: red;
}

main {
  background: grey;
}

footer {
  background: purple;
}

DEMO HERE

Answer 4

您可以使用 position: absolute;

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

或简单的方法是使正文占页面的 100%，min-height 为 100%。如果页脚的高度没有改变，这就可以正常工作。

给页脚一个负号margin-top:

#footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}

Answer 5

有几种方法可以做到这一点。让我们从最直接的方法开始吧。

如果设置了页脚高度（不会改变，无论浏览器宽度或页脚内容如何），您可以在页脚上使用负边距。

我们以这个html结构为例：

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


html,
body {
 height: 100%; // First we set the height to make sure the body is always atleast big enough
}

.container {
  min-height: 100%; // The container will always be 100% height at minimum;
}

.content {
  padding-bottom: 100px; // This is set to the footer height
}

.footer {
  height: 100px; // The footer has a set width
  margin-bottom: -100px; // We move the footer in the negative space that was created by the padding
}

推荐：

未设置页脚高度时会变得有点困难。这很可能是这种情况，因为您的网站可能会响应。

在这种情况下，我们将使用 flexbox。

    html, 
    body {
      height: 100%;
      margin: 0;
    }
    
    .container{
      display: flex; 
      flex-direction: column; 
      height: 100vh;
    }
    
    .content {
      background: gray;
      flex: 1 0 auto; 
    }
    
    .footer {
      background: blue;
      height: 30px;
      flex-shrink: 0; 
    }

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

我们将容器设置为 flex。弹性容器 "grow" 中的子 div 填充其父级。我们将 flex 设置为 column 以将它们显示在彼此下方而不是彼此相邻。此容器设置为 100vh。 vh代表"Viewport height"，即window的高度。内容设置为flex: 1 0 auto。这将允许它增长 1，但不会缩小 0，同时允许它的大小为 auto

页脚永远不会缩小 flex-shrink: 0，无论其他内容的大小如何。

你也可以看一下css grid. However since I assume you are somewhat new to this, I recommend sticking with flex for now! Flexbox一旦你意识到它可以做什么就很棒。

如何将页脚放在页尾？

How to put the Footer on the end of the page?

html

css

footer