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

我想让页脚

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

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


当前回答

我实现了使用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中。

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

其他回答

对我有用。

#container{ 
  height:100vh; 
  margin:0; 
  display:flex; 
  flex-direction:column; 
}

#footer{
  margin-top:auto; 
}


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

#{容器 身高:100 vh; 保证金:0; 显示:flex; flex-direction:列; } #页脚{ margin-top:汽车; } < div id = "容器" > < div id = "头" >头< / div > 身体< div id = "身体" > < / div > < div id = "脚注" >页脚< / div > < / div >

需要警惕的一件事是移动设备,因为它们以一种“不寻常”的方式实现视口的想法:

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

因此,使用位置:固定;(正如我在其他地方看到的推荐)通常不是正确的方法。当然,这取决于你所追求的具体行为。

我所使用的,并且在桌面和移动设备上运行良好的方法是:

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

with

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}
 
#footer {
    position: absolute;
    bottom: 0;
}

然而,另一个非常简单的解决方案是:

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

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

js小提琴

诀窍是使用display:table表示整个文档,使用display:table-row(高度为0)表示页脚。

由于页脚是唯一显示为表行的子主体,因此它呈现在页面底部。

你可以这样做

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

使用Bootstrap的一行解决方案

除了提供的所有CSS和jQuery解决方案, 我已经列出了一个使用Bootstrap的解决方案,在body标签上使用一个类声明:d-flex flex-column justify-content-between

这并不需要提前知道页脚的高度。 这并不需要设置绝对位置。 这适用于在较小屏幕上溢出的动态div。

html, body { height: 100%; } <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body class="d-flex flex-column justify-content-between text-white text-center"> <header class="p-5 bg-dark"> <h1>Header</h1> </header> <main class="p-5 bg-primary"> <h1>Main</h1> </main> <footer class="p-5 bg-warning"> <h1>Footer</h1> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html>