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

我想让页脚

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

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


当前回答

我用这个把我的脚贴在底部,它对我有用:

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

这是你在HTML中唯一要做的修改,用“allButFooter”类添加div。我对所有的页面都这么做了,那些很短的页面,我知道页脚不会粘在底部,也有足够长的页面,我已经知道我必须滚动。我这样做了,所以我可以看到它在页面内容是动态的情况下工作得很好。

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

“allButFooter”类有一个min-height值,它取决于视口的高度(100vh意味着视口高度的100%)和页脚的高度,我已经知道是40px。

这就是我所做的,而且对我来说非常有效。我并没有在所有浏览器上都试过,只在Firefox、Chrome和Edge上试过,结果和我想要的一样。页脚贴在底部,不需要更改z-index、位置或任何其他属性。文档中每个元素的位置都是默认位置,我没有将其更改为绝对或固定或其他任何位置。

使用响应式设计

有件事我想澄清一下。当我在使用Twitter-Bootstrap进行响应式设计时,这个解决方案,具有相同的40px高的页脚,并没有像我预期的那样工作。我必须修改函数中我要减去的值

.allButFooter {
    min-height: calc(100vh - 95px); 
}

这可能是因为Twitter-Bootstrap有自己的边距和填充,所以这就是为什么我必须调整这个值。

其他回答

从IE7开始,你可以简单地使用

#footer {
    position:fixed;
    bottom:0;
}

参见caniuse寻求支持。

有些解决方案不适合我,但当我决定使用flex选项时,我发现最好的选择是下面的示例。

html, body{ height: 100%; } body{ display: flex; flex-direction: column; } .main-contents{ flex: 1 0 auto; min-height: 100%; margin-bottom: -77px; background-color: #CCC; } .footer{ height: 77px; min-height: 77px; width: 100%; bottom: 0; left: 0; background: #000000; flex-shrink: 0; flex-direction: row; position: relative; } .footer-text{ color: #FFF; } @media screen and (max-width: 767px){ #content{ padding-bottom: 0; } .footer{ position: relative; /*position: absolute;*/ height: 77px; width: 100%; bottom: 0; left: 0; } } <html> <body> <div class="main-contents" > this is the main content </div> </body> <footer class="footer"> <p class="footer-text">This is the sticky footer</p> </footer> </html>

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

只需要自定义页脚部分

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}
 <div class="footer">
   Footer is always bootom
 </div>