CSS使HTML页脚保持在页面底部的最低高度，但不重叠页面

我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm)，有一个脚注，我不能坐在页面的底部。

我想让页脚

当页面较短且屏幕未被填充时，坚持在窗口底部当有超过一个屏幕的内容时，保持在文档末尾，并像往常一样向下移动(而不是重叠内容)。

CSS是继承的，让我困惑。我似乎不能正确地改变它，把一个最小高度的内容或使页脚到底部。

当前回答

一个简单的方法是让页面主体100%，最小高度也为100%。如果你的页脚的高度没有改变，这工作得很好。

给页脚一个负的margin-top:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

2009-03-27 10:53:47

其他回答

我刚才在这里回答了类似的问题

在页眉固定的页面底部放置页脚

我在网页开发方面是新手，我知道这个问题已经有了答案，但这是我发现的最简单的解决方法，我认为在某种程度上是不同的。我想要一些灵活的东西，因为我的网页应用程序的页脚有一个动态高度，我最终使用了FlexBox和一个间隔。

首先设置html和body的高度

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

我假设我们的应用程序的列行为，在这种情况下，你需要添加一个标题，英雄或任何垂直对齐的内容。

创建spacer类

.spacer {
    flex: 1; 
}

之后你的HTML可能是这样的

<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

你可以在这里玩 https://codepen.io/anon/pen/xmGZQL

2018-12-14 20:32:18

我在我的许多项目中都使用过，从来没有遇到过任何问题:)

供您参考，代码片段

* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */ height: 100%; margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */ background:green; } .footer, .push { height: 50px; /* .push must be the same height as .footer */ } .footer{ background:gold; } <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <div class="wrapper"> Content Area </div> <div class="push"> </div> <div class="footer"> Footer Area </div> </body> </html>

2016-12-19 13:09:24

<!DOCTYPE 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>


#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 */
}

2020-05-16 08:19:47

footer {
  margin-top:calc(5% + 60px);
}

这很好

2018-10-20 05:34:33

虽然我找到了许多类似的答案，但我能找到的唯一解决方案是，页脚总是在底部，不显示在现有数据之上:

footer {
    position: relative;
    clear: both;
}

2021-12-17 21:14:01

CSS使HTML页脚保持在页面底部的最低高度，但不重叠页面

推荐文章

最新文章

标签