如何用CSS把层固定在整个网页的最底部?

html-css010

如何用CSS把层固定在整个网页的最底部?,第1张

打开一个编辑软件设置一下css与div区域,使其固定在页面的底部。

其主要属性:position:fixed 绝对定位生成绝对定位的元素,相对于浏览器窗口进行定位。

网页中实现效果如下:

扩展:还有一种定位方式为:position:absolute如上例方式浏览器滑动的时候,它会随着浏览器滚动条而滚动;而position:absolute则不会。

css的特点:

结构与样式分离的方式,便于后期维护与改版

样式定义精确到像素的级别

可以用多套样式,使网页有任意样式切换的效果;(如:www.YOUKU.COM的开,关灯效果)

降低服务器的成本。

css3可以做到兼容ie9和市面上的多数非IE内核浏览器,它的

 background-size可以设置2个值,1个为必填,1个为可选。

其中第1个值用于指定背景图的width,第2个值用于指定背景图的height,如果只给background-size设置1个值,则第2个值默认为auto(cover和contain特定值除外)。

div{

background-image:url(test.png)

background-repeat:no-repeat

background-size:100px

}

cover表示覆盖整个容器。你要背景全部那么需要注意的是html,body {height:100%}

当然以上内容不兼容低版本IE浏览器和不兼容css3规则的浏览器。

你说的背景整张显示,我之前项目遇到过这样的需求。我是直接用脚本写的。

实现思路是用图片绝对定位在网站最底层,z-index属性设置成负值。用脚本判断窗口大小,在每次窗口大小发生改变时监听事件捕获长宽,赋值给这张“地图”。