html 页面最下角,将页脚始终控制在页面最下方的几种方法

html和body的高度并不一定相同,在内容少的时候,body的高度要小于html,当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候,此时html的高度大于body的高度。网页中的元素都是以body最为参考,所以有必要保持html和body的高度相同。

html,body{height:100%;}

1. 第一种方法

在body中使用两个容器,包括网页的页脚和另外一部分(container)。设置container的高度为100%;页脚部分使用 负外边距 保持其总是在最下方。

css 部分:

html, body {

height:100%;

}

.fl {

float:left;

display:inline;

}

#container {

width:100%;

height:300px;

overflow:hidden;

height:100%;

border-bottom:70px #FFFFFF solid;

}

.aside {

width:30%;

}

.article {

width:70%;

}

#footer {

height:50px;

width:100%;

clear:both;

margin-top:-50px;

border-bottom:1px solid #e0e0e0;

border-top:1px solid #e0e0e0;

}

html 部分

dsfcndsjkcnsd
cdsklcmdskcmkdslcmksdlckldsmcskl

2. 第二种方法:使用绝对定位

这里我们使用到了position属性,让我们先来回顾一下position的基础用法:

position有四个参数:static | relative | absolute | fixed

position:static,意味元素没有被定位,元素会出现在文档本该出现位置,是页面元素默认的定位的方式,一般无需指定,除非想要覆盖之前设置的定位。

position:relative,很明白,相对元素本该位置的偏移量#nav{

position:relative;

top:15px;

left:20px;

}

position:absolute,这时候元素已经脱离了文档,文档中已经没有自己的本该的位置了,但我们可以通过left、bottom、left和right来规定其在文档中位置。#nav{

postion:absolute;

botton:0px;

}

我们知道万物都是相对的,元素进行上面设置了后就保证nav元素始终保持在底部了呢?nav元素离botton为0px,是哪个为参照物呢,是父级元素还还是浏览器呢,其实这里分为两种情况:

如果父级元素(父级元素的父级、父级的父级的父级......)设置postion时,则子元素此时相对的是父级的,所以当内容过多时,脚DIV不能被挤到底部去。

如果父级元素(父级元素的父级、父级的父级的父级......)没有设置postion时,则子元素此时相对的是浏览器的,所以当内容过少时,脚DIV不能被挤到底部去。

好了,下面回到正题,同样需要保持html和body的高度相同,并且body需要添加另外的一些样式,footer需要使用绝对定位。

css代码如下:

body{position:relative;height:auto !important;height:100%;min-height:100%;}

html {

height:100%;

}

body {

margin:0;

padding:0;

position:relative;

height:auto !important;

height:100%;

min-height:100%;

text-align:center;

}

.fl {

float:left;

display:inline;

}

#header {

width:100%;

height:80px;

}

#container {

width:100%;

height:300px;

overflow:hidden;

border-bottom:#FFFFFF 60px solid;

}

.aside {

width:30%;

}

.article {

width:70%;

}

#footer {

height:50px;

position:absolute;

width:100%;

clear:both;

bottom:0;

left:0;

border-bottom:1px solid #e0e0e0;

border-top:1px solid #e0e0e0;

}

html 代码:

fddfv

容量:24M/2G

dsfcndsjkcnsd
cdsklcmdskcmkdslcmksdlckldsmcskl
footer

3. 第三种方法:采用flexbox

flexbox——CSS3提供的一种先进布局模型,旨在建立具有适应性的布局。如果你对 flexbox 还不怎么熟悉,文章最后有一些扩展阅读链接,可以帮助你了解 flexbox。

我们的页面应该具备 Header、主体内容区域和 Footer,下面是该页面的 HTML

...

...

...

为了启用 flex模式,我们将 body 的 display 属性设置为 flex, 然后将方向属性设置为列, (默认是行,也就是横向布局)。同时,将html 和 body 元素的高度设置为100%,使其充满整个屏幕。

html{

height: 100%;

}

body{

display: flex;

flex-direction: column;

height: 100%;

}

现在,我们需要调整各个区域占用的页面空间,我们将通过flex 属性来达到这一目的,该属性实际包含了三个属性,分别是:

flex-grow:元素在同一容器中对可分配空间的分配比率,及扩展比率

flex-shrink:如果空间不足,元素的收缩比率

flex-basis:元素的伸缩基准值

我们希望 header 和footer 只占用他们应该占用的空间,将剩余的空间全部交给主体内容区域

header{

/* 我们希望 header 采用固定的高度,只占用必须的空间 */

/* 0 flex-grow, 0 flex-shrink, auto flex-basis */

flex: 0 0 auto;

}

.main-content{

/* 将 flex-grow 设置为1,该元素会占用全部可使用空间

而其他元素该属性值为0,因此不会得到多余的空间*/

/* 1 flex-grow, 0 flex-shrink, auto flex-basis */

flex: 1 0 auto;

}

footer{

/* 和 header 一样,footer 也采用固定高度*/

/* 0 flex-grow, 0 flex-shrink, auto flex-basis */

flex: 0 0 auto;

}

这样footer 会始终显示在页面的最底部。

4. 总结

如你说见,如果是从零开始构建布局,flexbox 将会是你的得力助手。除了极少数的例外,所有的主流浏览器都支持 flexbox,就 IE 来说,IE9以后的版本都是支持的。

下面是一些学习 flexbox 布局模型不错的教程和速查表

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值