我有一个简单的2列布局，带有一个脚注，可以清除标记中的左右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;
}
优雅的工作无处不在。
其他回答
保持<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 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 > <页脚> 这是我的页脚 < /页脚>
如果你不希望它使用位置固定，并在移动设备上烦人地跟随你，这似乎对我来说是有效的。
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;在页脚。然后确保页脚是主体中的最后一个元素。
如果这对其他人不起作用，请告诉我，以及为什么。我知道这些乏味的风格技巧在我没有想到的各种情况下会表现得很奇怪。
下面是一个使用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 )
要获得一个粘性页脚:
为你的内容设置一个<div> with class="wrapper"。 在包装器的</div>结束之前放置 < div class = "推" > < / div >。 在包装器的</div>结束后放置 < div class = "脚注" > < / div >。
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
