我有一个简单的2列布局,带有一个脚注,可以清除标记中的左右div。我的问题是,我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚,它就会起作用,但情况并不总是如此。
当前回答
一个快速简单的解决方案,使用flex
将html和body的高度设置为100%
html,
body {
width: 100%;
height: 100%;
}
将主体显示为具有列方向的flex:
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
为main添加flex-grow: 1
main {
flex-grow: 1;
}
flex-grow指定应将伸缩容器中剩余空间的多少分配给项(伸缩增长因子)。
*, *::after, *::before{ margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } main { flex-grow: 1; } footer{ background-color: black; color: white; padding: 1rem 0; display: flex; justify-content: center; align-items: center; } <body> <main> <section > Hero </section> </main> <footer > <div> <p > © Copyright 2021</p> </div> </footer> </body>
其他回答
设置#页脚的CSS为:
position: absolute;
bottom: 0;
然后,您需要在#边栏和#内容的底部添加填充或边距,以匹配#footer的高度,或者当它们重叠时,#footer将覆盖它们。
此外,如果我没记错的话,IE6在底部有一个问题:0 CSS。你可能不得不为IE6使用JS解决方案(如果你关心IE6的话)。
一个类似于@gcedo的解决方案,但不需要添加中间内容来向下推页脚。我们可以简单地添加margin-top:auto到页脚,不管它的高度或上面内容的高度,它都会被推到页面的底部。
身体{ 显示:flex; flex-direction:列; 最小高度:100 vh; 保证金:0; } .content { 填充:50 px; 背景:红色; } .footer { margin-top:汽车; 填充:10 px; 背景:绿色; } < div class = "内容" > 这里有些内容 < / div > <页脚类= >“页脚” 一些内容 < /页脚>
很多人把这个简单问题的答案放在这里,但我有一件事要补充,考虑到我是多么沮丧,直到我弄清楚我做错了什么。
如前所述,最直接的方法是这样做。
html {
position: relative;
min-height: 100%;
}
body {
background-color: transparent;
position: static;
height: 100%;
margin-bottom: 30px;
}
.site-footer {
position: absolute;
height: 30px;
bottom: 0px;
left: 0px;
right: 0px;
}
然而,post中没有提到的属性是body标签上的position: static,大概是因为它通常是默认的。相对位置无效!
我的wordpress主题覆盖了默认的主体显示,这让我困惑了很长一段时间。
对于自然的页眉和页脚高度使用CSS Flexbox。
参见JS Fiddle。
HTML
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS
html {
height: 100%;
}
body {
height: 100%;
min-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
flex-shrink: 0;
}
header,
footer {
flex: none;
}
大多数答案使用固定值的css。虽然它可能工作,但当页脚更改时,需要调整页脚大小的固定值。另外,我使用的是WordPress,不想打乱WordPress主题为你定义的页脚大小。
我用一点javascript解决了这个问题,只在需要时触发。
var fixedFooter = false;
document.addEventListener("DOMContentLoaded", function() {fixFooterToBottom();}, false);
window.addEventListener("resize", function() {fixFooterToBottom();}, false);
function fixFooterToBottom()
{
var docClientHeight = document.documentElement.clientHeight;
var body = document.querySelector("body");
var footer = document.querySelector("footer");
fixedFooter = fixedFooter ? (body.clientHeight + footer.clientHeight ) < docClientHeight : body.clientHeight < docClientHeight;
footer.style.position = fixedFooter ? "fixed" : "unset";
footer.style.left = fixedFooter ? 0 : "unset";
footer.style.right = fixedFooter ? 0 : "unset";
footer.style.bottom = fixedFooter ? 0 : "unset";
}
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?