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

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

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

让我们以这个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。 Flex容器中的子div“增长”以填充其父代。我们将flex设置为column，以将它们显示在彼此下方，而不是彼此相邻。该容器设置为100vh。 vh代表“视口高度”或窗口的高度。内容设置为flex: 1 0 auto。这将使其增大1，而不会缩小0，同时使其尺寸为auto

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

您也可以查看css grid。但是，由于我认为您对此还有些陌生，因此建议您暂时坚持使用flex！一旦意识到它可以做什么，Flexbox就很棒。

Answer 2

我没有您的代码，但是一个好的解决方案是首先将您的身体的最小身高设置为页面的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 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>

OR 简单的方法是使正文占页面的100％，min-height为100％。如果页脚的高度没有变化，则此方法很好。

将页脚设为负数margin-top：

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

如何将页脚放在页面的末尾？

4 个答案: