我有一个简单的2列布局,带有一个脚注,可以清除标记中的左右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主题覆盖了默认的主体显示,这让我困惑了很长一段时间。
其他回答
一个类似于@gcedo的解决方案,但不需要添加中间内容来向下推页脚。我们可以简单地添加margin-top:auto到页脚,不管它的高度或上面内容的高度,它都会被推到页面的底部。
身体{ 显示:flex; flex-direction:列; 最小高度:100 vh; 保证金:0; } .content { 填充:50 px; 背景:红色; } .footer { margin-top:汽车; 填充:10 px; 背景:绿色; } < div class = "内容" > 这里有些内容 < / div > <页脚类= >“页脚” 一些内容 < /页脚>
查看http://1linelayouts.glitch.me/,示例4。Una Kravets解决了这个问题。
这将创建一个带有页眉、主页和页脚的3层页面。
-你的页脚将始终停留在底部,并使用空间来适应内容;
-你的标题将始终保持在顶部,并使用空间来适应内容
-你的主系统总是会使用所有可用的剩余空间(剩余的部分空间),如果需要,足够填满整个屏幕。
HTML
<div class="parent">
<header class="blue section" contenteditable>Header</header>
<main class="coral section" contenteditable>Main</main>
<footer class="purple section" contenteditable>Footer Content</footer>
</div>
CSS
.parent {
display: grid;
height: 95vh; /* no scroll bars if few content */
grid-template-rows: auto 1fr auto;
}
下面是一个使用jQuery的解决方案,它就像一个魅力。它检查窗口的高度是否大于主体的高度。如果是,则更改页脚的边距顶部以进行补偿。在Firefox, Chrome, Safari和Opera中测试。
$( function () {
var height_diff = $( window ).height() - $( 'body' ).height();
if ( height_diff > 0 ) {
$( '#footer' ).css( 'margin-top', height_diff );
}
});
如果你的页脚已经有一个边距顶部(50像素,例如),你将需要改变最后一部分:
css( 'margin-top', height_diff + 50 )
对于这个问题,我看到的许多答案都是笨拙的,难以实现和低效的,所以我想我应该尝试一下,并提出我自己的解决方案,只是一点点css和html
超文本标记语言 身体{ 高度:100%; 保证金:0; } .body { Min-height: calc(100% - 2rem); 宽度:100%; 背景颜色:灰色; } .footer { 高度:2快速眼动; 宽度:100%; 背景颜色:黄色; } 身体< > <div class="body">test as body</div> <div class="footer">test as footer</div> 身体< / >
这是通过设置页脚的高度,然后使用CSS计算出页面的最小高度,页脚仍然在底部,希望这有助于一些人:)
你可以使用position: absolute following将页脚放在页面的底部,但要确保你的两列有适当的边距-底部,这样它们就不会被页脚遮挡。
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
#content, #sidebar {
margin-bottom: 5em;
}
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?