我有以下页面(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中。

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

其他回答

我认为你可以将主要内容设置为视口高度,所以如果内容超过,主要内容的高度将定义页脚的位置

* { 保证金:0; 填充:0; 宽度:100%; } 身体{ 显示:flex; flex-direction:列; } 标题{ 高度:50 px; 背景:红色; } 主要{ 背景:蓝色; /*这是最重要的部分 身高:100 vh; } 页脚{ 背景:黑色; 高度:50 px; 底部:0; } <标题> < /头> 主要主要< > < / > <页脚> < /页脚>

这就是所谓的粘性页脚。在谷歌上搜索它会出现很多结果。我成功地使用过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>

此代码的源代码

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

这很好

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

给页脚一个负的margin-top:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}
<!DOCTYPE html>

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

<body>
   <header class='header'></header>
   <div class="body-content">
     <!-- all other page content -->
   </div>
   <footer class="footer"></footer>
</body>

</html>

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

.body-content {
  flex-grow:1   
}