我有一个简单的2列布局,带有一个脚注,可以清除标记中的左右div。我的问题是,我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚,它就会起作用,但情况并不总是如此。
当前回答
CSS:
#container{
width: 100%;
height: 100vh;
}
#container.footer{
float:left;
width:100%;
height:20vh;
margin-top:80vh;
background-color:red;
}
HTML:
<div id="container">
<div class="footer">
</div>
</div>
如果你正在寻找一个在页面底部对齐的响应性页脚,它总是保持视口高度的80%的上距,那么这个方法应该是有用的。
其他回答
我自己有时也与此斗争,我总是发现所有这些div在彼此之间的解决方案是一个混乱的解决方案。 我只是胡乱摆弄了一下,我个人发现这是有效的,而且这当然是最简单的方法之一:
html {
position: relative;
}
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
我喜欢这样做的原因是不需要应用额外的HTML。您可以简单地添加这个CSS,然后编写您的HTML
我创建了一个非常简单的库https://github.com/ravinderpayal/FooterJS
它使用起来很简单。在包含库之后,只需调用这行代码。
footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));
页脚可以通过使用不同的参数/id调用上面的函数来动态更改。
footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));
注意:-你不必改变或添加任何CSS。库是动态的,这意味着即使屏幕在加载页面后调整大小,它也会重置页脚的位置。我创建了这个库,因为CSS解决了这个问题,但当显示的大小发生显著变化时,从台式机到平板电脑或反之亦然,它们要么重叠的内容,要么不再保持粘性。
另一种解决方案是CSS媒体查询,但你必须为不同大小的屏幕手动编写不同的CSS样式,而这个库自动工作,并由所有基本的JavaScript支持浏览器支持。
编辑 CSS解决方案:
@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
/* For mobile phones: */
#footer {
width: 100%;
position:fixed;
bottom:0;
}
}
现在,如果显示的高度超过你的内容长度,我们将使页脚固定在底部,如果不是,它将自动出现在显示的最后,因为你需要滚动来查看它。
而且,它似乎是一个比JavaScript/库更好的解决方案。
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的完整指南
保持<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,所以这种情况下工作良好,尝试和测试!
div.fixed { 位置:固定; 底部:0; 右:0; 宽度:100%; 边框:3px实体#73AD21; } <身体风格= "高度:1500 px”> < h2 >:固定;< / h2 > <p>一个位置为固定的元素;相对于视口的位置,这意味着即使页面被滚动,它也始终保持在相同的位置:</p> < div class = "固定" > 这个div元素的位置为:fixed; < / div > 身体< / >
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?