Question

我知道这是一个重复的问题，我已经阅读了关于this one等特定问题的许多问题。

但我不能为我的生活让我的工作。我使用％和vh为我的height和min-height尝试了html和body的多种组合。我尝试将保证金设置为0，但这没有帮助。我在Chrome和Firefox上都试过这个，浏览器都没有。有一些答案建议使用position: absolute，但这会影响我所有内容的样式。

我试过一些组合：

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

html{
    height: 100%;
}

body {
    min-height: 100%;
}

html{
    height: 100%;
    margin: 0;
}

body {
    margin: 0;
    min-height: 100%;
}

我的HTML布局：

<html>
    <head>
        ... stuff
    </head>
    <body class=".container">
        ... stuff
    </body>
</html>

Answer 1

您正在寻找的是 position: fixed ，它会告诉该元素被修复到该位置，而不管其他内容如何。将此与 bottom: 0 结合使用，说明该元素应固定在页面底部：

＆＃13;

body {
  margin: 0;
}

div {
  padding: 5px;
}

.container {
  background: #DDD;
  height: 50px;
}

.footer {
  position: fixed;
  bottom: 0px;
  height: 20px;
  width: 100%;
  background: #DDD;
}

＆＃13;

<body>
  <div class="container">Text</div>
  <div class="footer">Copyright</div>
</body>

＆＃13;

希望这有帮助！：）

Answer 2

解决方案：您可以使用html 5元素头，文章，部分，页脚并根据您的要求设置高度和宽度......

Answer 3

您可以在底部使用固定位置，但这可能会在内容被覆盖时给您带来显示问题。

我建议使用类似

的内容

body {
  height: calc(100vh - 100px);
}

如果你想为页眉和页脚留下100像素

Answer 4

由于我无法更改身体的height属性，因此我在https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/ 1找到了这个解决方案，也是纯CSS：

html结构：

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>
</html>

以及相应的CSS：

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

Bootstrap / CSS - 即使没有足够的内容，也要将页脚保持在底部

4 个答案: