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

我想让页脚

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

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


当前回答

其实很简单。这个解决方案不需要知道页脚高度。

<body>
  <div class="app">
    Website
  </div>
  <div class="footer">
    Footer
  </div>
</body>
.app {
  min-height: 100vh;
}

其他回答

这就是所谓的粘性页脚。在谷歌上搜索它会出现很多结果。我成功地使用过CSS Sticky Footer。但还有更多。

* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; } .footer, .push { height: 4em; } <html> <head> <link rel="stylesheet" href="layout.css" ... /> </head> <body> <div class="wrapper"> <p>Your website content here.</p> <div class="push"></div> </div> <div class="footer"> <p>Copyright (c) 2008</p> </div> </body> </html>

此代码的源代码

使用Flexbox保持页脚在底部

< div风格= "最小高度:100 vh;显示:flex;flex-direction:列; justify-content:之间的空间;" > < div > < !——包装(不带页脚)——> <标题> 我是头。 头> < / 文章< > 我是一篇文章! < / >的文章 < / div > < !——结束:包装器(没有页脚)——> <页脚> 我是一个脚注。 > < /页脚 < / div >

Note

确保你将所有内容包装在<div>或任何其他块级元素中,使用以下CSS样式:显示:flex;flex-direction:列;justify-content:之间的空间;. 确保在<div>或任何其他块级元素中包装了除页脚元素以外的所有内容。 确保您使用<footer>或任何其他块级元素来包装页脚。

代码的解释

Min-height: 100vh确保主体元素至少伸展到屏幕的全部高度 Flex-direction:列在保留堆叠块元素方面保持正常文档流的行为(假设主体的直接子元素确实都是块元素)。 对齐-内容:空格将页脚推到屏幕底部。


检查如何做同样的(保持页脚在底部)通过使用引导5 -链接

你需要使用position: absolute;这很重要,下面是0

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

我实现了使用CSS网格,基本上我定义了3行:

头 内容 页脚

并且使用网格来定义大小,诀窍是在行末对齐页脚,像这样:

CSS

body {
    display: grid;
    grid-template-rows: auto auto auto;
}

footer {
    display: grid;
    align-self: end; /* The trick */
}

HTML文件

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <header>
    Header content
  </header>
  
  <h1>main body</h1>
  <p>This is a paragraph.</p>
  
  <footer>
    <p>Hello there.</p>
  </footer>
</body>
</html>

您可以使用更多的行,但请记住将其添加到CSS中,或将所有内容包装在div中。

这篇指南真的帮我找到了答案。

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

footer {
    position: relative;
    clear: both;
}