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

我想让页脚

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

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


当前回答

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

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

其他回答

与其他解决方案相比,不需要添加额外的容器。因此,这个解决方案更优雅一些。在代码示例下面,我将解释为什么这样工作。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>
        
            html
            {
                height:100%;
            }
            
            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }
        
            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }
            
            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;
                
                background-color: red;
            }
        
        </style>
    </head>
    <body>
        <header>header</header>
        
        
        <footer>footer</footer>
    </body>
</html>

所以我们要做的第一件事,就是让最大的容器(html) 100%html页面和页面本身一样大。接下来我们设置body height,它可以大于html标签的100%,但它至少应该一样大,因此我们使用min-height 100%。

我们也让物体是相对的。相对意味着您可以相对地从原始位置移动块元素。但我们在这里不用。因为相对还有第二个用途。任何绝对元素要么是根元素(html)的绝对元素,要么是第一个相对父元素/祖父元素的绝对元素。这就是我们想要的,我们想要footer是绝对的,相对于主体,也就是底部。

最后一步是将footer设置为absolute和bottom:0,这将把它移动到第一个相对的父/祖父类(当然是body)的底部。

现在我们还有一个问题要解决,当我们填满整个页面时,内容会放在页脚下面。为什么?好吧,因为页脚不再在“html流”,因为它是绝对的。那么我们如何解决这个问题呢?我们将在body中添加padding-bottom。这确保主体实际上比它的内容更大。

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

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有自己的边距和填充,所以这就是为什么我必须调整这个值。

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

供您参考,代码片段

* { 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>

只需要自定义页脚部分

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

使用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 -链接