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

我想让页脚

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

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


当前回答

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

<!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。这确保主体实际上比它的内容更大。

其他回答

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

此代码的源代码

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

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

只需要自定义页脚部分

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

一个非常简单的跨浏览器工作的方法是:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; } <div id="container"> <div id="header">header</div> <div id="body">body</div> <div id="footer">footer</div> </div>

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

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

参见caniuse寻求支持。