CSS 实现底部固定
在制作页面有这样一种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。
那么如何将Web页面的 “footer”部分永远固定在页面的底部呢？注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部，
换句话说，就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分在页面的底部，总而言之Web页面的footer部分永远在页面的底部，换句说，Footer部分永远沉底。
方法：
1. HTML结构：
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
页面容容部分
</div>
<div id="footer">Footer Section</div>
</div>
实现这页脚永远固定在页面的底部，我们只需要四个div，其中div#container是一个容器，在这个容器之中，我们包含了 div#header（头部），div#page（页面主体部分），div#footer（页脚部分）
2. CSS代码：
html,body {
margin:;
padding:;
height: 100%;
}
#container {
min-height:100%;
height: auto !important;
height: 100%; /*IE6不识别min-height*/
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;/*等于footer的高度*/
}
#footer {
position: absolute;
bottom:;
width: 100%;
height: 60px;/*脚部的高度*/
background: #6cf;
clear:both;
}
原理：
- <html>和<body>标签：html和body标签中必须将高度(height)设置为“100%”,这样我们就可以在容器上设置百分比高度，同时需要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0；
- div#container容器：div#container容器必须设 置一个最小高度(min-height)为100％；这主要使他在内容很少（或没有内容）情况下，能保持100％的高度。另外我们还需要在div#container容器中设置一个"position:relative"以便于里面的元素进行绝对定位后不会跑了div#container容器；
- div#page容器：div#page这个容器有一个很关键的设置，需要在这个容器上设置一个padding-bottom值，而且这个值要等于（或略大于）页脚div#footer的高度（height）值；
- div#footer容器：div#footer容器必须设置一个固定高度。div#footer还需要进行绝对定位，并且设置bottom:0；让div#footer固定在容器div#container的底部，这样就可以实现我们前面所说的效果，当内容只有一点时，div#footer固定在屏幕的底部（因为div#container设置了一个min-height:100%），当内容高度超过屏幕的高度，div#footer也固定在div#container底部，也就是固定在页面的底部。你也可以给div#footer加设一个"width:100%"，让他在整个页面上得到延伸；
- 其他div：至于其他容器可以根据自己需求进行设置，比如说前面的div#header,div#left,div#content,div#right等。
CSS 实现底部固定的更多相关文章
- CSS实现底部固定
html代码结构 <body> <div class="wrap"> <div class="head"></div& ...
- jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6
http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html —————————————————————————————————————— ...
- CSS Sticky Footer: 完美的CSS绝对底部
CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案.在CSS的世界里,似乎没有完美这种说法.所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧. 先说我们为什么会使用到这个C ...
- 微信小程序之顶部固定和底部固定
顶部固定 <view style="position:fixed;top:0;"> ...... </view> 底部固定 <view style=& ...
- 前端CSS - 相对定位,绝对定位,固定定位
前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...
- 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置
1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...
- css设置背景固定不滚动效果的示例
css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...
- css - 紧贴底部的页脚
有的时候,由于页面长度不够,页面底部的页脚会很尴尬的跑上来,如图: 有的同学可能会想用position:fixed;bottom:0;来永远居底.但有些场景确实不适合. 这是我从YII2中找到的简单解 ...
- 解决fixed在苹果手机抖动问题/头部底部固定布局
1.头部和底部固定,中间内容滚动,不涉及fixed 1)absolute与height:100% <!DOCTYPE html><html><head> <m ...
随机推荐
- 根据树父子ID拼接无限极树结构表的名称
declare @c varchar(50)set @c='572a3d51-ef7a-459e-a5cd-ebf0fca51e8b' --能查出来呀 你试试,我试一下,好像可以啦谢谢 declare ...
- VS 调试Window Server方法
在需要调试的地方加 Debugger.Launch();然后在本机安装服务并启动即可进入
- HTML3层叠样式表
层叠样式表:CSS Cascading Style Sheet.V2.1 控制页面样式外观. 一.样式表分三类: 1.内联样式表.--放在元素的开始标记中.--只对当前元素起作用. <in ...
- Android 技巧记录
1.取消EditText自动获取焦点 在项目中,一进入一个页面, EditText默认就会自动获取焦点,弹出输入法界面,很不友好.那么如何取消这个默认行为呢? 解决之道:在EditText的父级控件中 ...
- Scala基础入门－3
学习Scala——映射和元组 映射和和元组,也就是Maps和Tuples.Map这东西应该都挺明白的,就是键值对的集合.而元组,tuple,这东西并不是每个语言都有(Python中是有的,不过当时学的 ...
- PCL学习笔记（一）
由于项目需要,开始学习一下HP公司的PCL打印语言,发现这方面的中文资料非常少,我做下记录也为后人提供便利. 关于PCL的介绍可以参考wiki百科 http://zh.wikipedia.org/zh ...
- PVRTC 纹理
iPhone的图形芯片(PowerVR MBX)对一种称为 PVRTC 的压缩技术提供的硬件支持,Apple推荐在开发iPhone应用程序时使用 PVRTC 纹理.他们甚至提供了一篇很好的技术笔记描述 ...
- linux学习之（四）-用户、组的操作，给文件文件夹设置组，更改目录权限、文件权限
命令帮助查看: man 命令(查看一个命令的详细帮助信息) 例:man useradd 或者用 -h 格式 命令 -h(查看一个命令的简要帮助) 例:useradd -h 用户: 在user ...
- Jquery操作-（多种实例）--未完
一.Jquery简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. jQuery对象 jQuer ...
- aui
#encoding:utf-8import wximport wx.auiclass MyFrame(wx.Frame): def __init__(self, *args, **kwargs): w ...