我有一个简单的2列布局，带有一个脚注，可以清除标记中的左右div。我的问题是，我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚，它就会起作用，但情况并不总是如此。
当前回答
一个类似于@gcedo的解决方案，但不需要添加中间内容来向下推页脚。我们可以简单地添加margin-top:auto到页脚，不管它的高度或上面内容的高度，它都会被推到页面的底部。
身体{ 显示:flex; flex-direction:列; 最小高度:100 vh; 保证金:0; ｝ .content { 填充:50 px; 背景:红色; ｝ .footer { margin-top:汽车; 填充:10 px; 背景:绿色; ｝ < div class = "内容" > 这里有些内容 < / div > <页脚类= >“页脚” 一些内容 < /页脚>
其他回答
使用绝对定位和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>
使用CSS vh单位!
也许最明显的和非hack的方法来处理粘脚将是使用新的css视口单位。
以下面的简单标记为例:
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>
如果页眉是80px高，页脚是40px高，那么我们可以在content div上用一个规则来创建我们的sticky footer:
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
}
这意味着:让内容div的高度至少等于视口高度减去页眉和页脚高度的总和。
就是这样。
* { 保证金:0; 填充:0; ｝ 标题{ 背景:黄色; 身高:80 px; ｝ .content { Min-height: calc(100vh - 120px); /* 80px页眉+ 40px页脚= 120px */ 背景:粉色; ｝ 页脚{ 高度:40像素; 背景:水; ｝ <header>header goes here</header> <div class="content">这个页面内容很少 这是我的页脚</footer>
... and here's how the same code works with lots of content in the content div: * { margin:0; padding:0; } header { background: yellow; height: 80px; } .content { min-height: calc(100vh - 120px); /* 80px header + 40px footer = 120px */ background: pink; } footer { height: 40px; background: aqua; } <header>header goes here</header> <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </div> <footer> This is my footer </footer>
NB:
1)必须知道页眉和页脚的高度
2)旧版本的IE (IE8-)和Android(4.4-)不支持视口单元。(caniuse)
3)曾经webkit在一个calc规则中有一个视口单位的问题。这确实是固定的(见这里)，所以没有问题。然而，如果你因为某些原因想避免使用calc，你可以使用负边距和box-sizing -填充来绕过它
像这样: * { 保证金:0;填充:0; ｝ 标题{ 背景:黄色; 身高:80 px; 位置:相对; ｝ .content { 最小高度:100 vh; 背景:粉色; Margin: -80px 0 -40px; 填充:80px 0 40px; box-sizing: border-box; ｝ 页脚{ 高度:40像素; 背景:水; ｝ <header>header goes here</header> <div class="content">Lorem ipsum < / div > <页脚> 这是我的页脚 < /页脚>
带有显示的粘性页脚:flex
解决方案的灵感来自菲利普沃尔顿的粘性页脚。
解释
此解决方案仅在以下情况下有效:
Chrome≥21.0 Firefox浏览器≥20.0 Internet Explorer浏览器≥10 Safari≥6.1
它基于伸缩显示，利用了flex-grow属性，该属性允许元素在高度或宽度上增长(当流动方向分别设置为列或行时)，以占用容器中的额外空间。
我们还将利用vh单位，其中1vh被定义为:
视口高度的1/100
因此，100vh的高度是告诉一个元素跨越整个视口高度的简洁方法。
这是你如何组织你的网页:
----------- body -----------
----------------------------
---------- footer ----------
----------------------------
为了让页脚固定在页面底部，您希望正文和页脚之间的空间增加到将页脚推到页面底部所需的大小。
因此我们的布局变成:
----------- body -----------
----------------------------
---------- spacer ----------
<- This element must grow in height
----------------------------
---------- footer ----------
----------------------------
实现
身体{ 保证金:0; 显示:flex; flex-direction:列; 最小高度:100 vh; ｝ .spacer { flex: 1; ｝ /*为演示的目的使它可见*/ .footer { 高度:50 px; 背景颜色:红色; ｝ 身体< > <div class="content">Hello World!< / div > < div class = "隔离" > < / div > <页脚类=“页脚”> < /页脚> 身体< / >
你可以在JSFiddle玩。
Safari怪癖
请注意，Safari对flex-shrink属性的实现有缺陷，该属性允许项缩小到显示内容所需的最小高度以上。 要解决这个问题，你必须在上面的例子中显式地将.content和页脚的flex-shrink属性设置为0:
.content {
flex-shrink: 0;
}
.footer {
flex-shrink: 0;
}
或者，将spacer元素的flex样式更改为:
.spacer {
flex: 1 0 auto;
}
这种3值简写样式相当于以下完整设置:
.spacer {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}
优雅的工作无处不在。
对我来说，最好的显示它(页脚)的方式是粘在底部，但不覆盖所有的内容:
#my_footer {
position: static
fixed; bottom: 0
}
如果你不希望它使用位置固定，并在移动设备上烦人地跟随你，这似乎对我来说是有效的。
html {
min-height: 100%;
position: relative;
}
#site-footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 6px 2px;
background: #32383e;
}
只需要将html设置为min-height: 100%;位置是相对的，位置是绝对的;底部:0;左:0;在页脚。然后确保页脚是主体中的最后一个元素。
如果这对其他人不起作用，请告诉我，以及为什么。我知道这些乏味的风格技巧在我没有想到的各种情况下会表现得很奇怪。
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
