我有一个简单的2列布局,带有一个脚注,可以清除标记中的左右div。我的问题是,我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚,它就会起作用,但情况并不总是如此。


当前回答

保持<main>为min-height 90vh将永远解决您的问题。 下面是基本结构,它将帮助您遵循语义并覆盖整个页面。

第一步:除了页眉和页脚,所有内容都放在主标签内。

<body>
    <header>
        <!╌ nav, logo ╌> 
    </header>
    <main>
        <!╌ section and div ╌> 
    </main>
    <footer>
        <!╌ nav, logo ╌>
    </footer>
</body>

步骤2:添加min-height: 90vh为主

main{
    min-height: 90vh;
}

通常,页眉和页脚的最低高度是70px,所以这种情况下工作良好,尝试和测试!

其他回答

使用绝对定位和z-index创建一个粘脚div在任何分辨率,使用以下步骤:

创建一个脚注div, position: absolute;底部:0;以及期望的高度 设置页脚的填充,以便在内容底部和窗口底部之间添加空白 创建一个容器div,用position: relative包装主体内容;最小高度:100%; 为主内容div添加底部填充,它等于高度加上页脚的填充 如果页脚被剪切,则设置页脚的z-index大于容器div

这里有一个例子:

<!doctype html> <html> <head> <title>Sticky Footer</title> <meta charset="utf-8"> <style> .wrapper { position: relative; min-height: 100%; } .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; } .column { height: 2000px; padding-bottom: 300px; background-color: grxqeen; } /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */ </style> </head> <body> <div class="wrapper"> <div class="column"> <span>hello</span> </div> <div class="footer"> <p>This is a test. This is only a test...</p> </div> </div> </body> </html>

div.fixed { 位置:固定; 底部:0; 右:0; 宽度:100%; 边框:3px实体#73AD21; } <身体风格= "高度:1500 px”> < h2 >:固定;< / h2 > <p>一个位置为固定的元素;相对于视口的位置,这意味着即使页面被滚动,它也始终保持在相同的位置:</p> < div class = "固定" > 这个div元素的位置为:fixed; < / div > 身体< / >

保持<main>为min-height 90vh将永远解决您的问题。 下面是基本结构,它将帮助您遵循语义并覆盖整个页面。

第一步:除了页眉和页脚,所有内容都放在主标签内。

<body>
    <header>
        <!╌ nav, logo ╌> 
    </header>
    <main>
        <!╌ section and div ╌> 
    </main>
    <footer>
        <!╌ nav, logo ╌>
    </footer>
</body>

步骤2:添加min-height: 90vh为主

main{
    min-height: 90vh;
}

通常,页眉和页脚的最低高度是70px,所以这种情况下工作良好,尝试和测试!

设置#页脚的CSS为:

position: absolute;
bottom: 0;

然后,您需要在#边栏和#内容的底部添加填充或边距,以匹配#footer的高度,或者当它们重叠时,#footer将覆盖它们。

此外,如果我没记错的话,IE6在底部有一个问题:0 CSS。你可能不得不为IE6使用JS解决方案(如果你关心IE6的话)。

react友好的解决方案-(不需要分隔符div)

Chris coyer(值得尊敬的CSS-Tricks网站)在sticky - footer上保持了最新的页面,现在至少有五种创建sticky footer的方法,包括使用FlexBox和CSS-Grid。

为什么这很重要?因为,对我来说,我多年来使用的早期/旧方法对React不起作用——我不得不使用Chris的flexbox解决方案——这很简单,也很有效。

下面是他的CSS-Tricks flexbox粘性页脚-看看下面的代码,它不可能更简单。

(下面的StackSnippet示例没有完美地呈现示例的底部。页脚会延伸到屏幕底部,这在现实生活中是不会发生的。)

html,身体{高度:100%;} 身体{显示:flex;flex-direction:列;} .content {flex: 1 0 auto;} /* flex:增长/收缩/伸缩基础;* / .footer {flex-shrink: 0;} /* ----以下仅为演示---- */ .footer{背景:苍绿色;} 身体< > <div class="content">Page content - height扩展到填充空间</div> <footer class="footer"> footer Content</footer> . 身体< / >

Chris还为那些喜欢网格的人演示了这个CSS-Grid解决方案。


引用:

CSS-Tricks - Flexbox的完整指南