利用CSS使footer固定在页面底部
1.HTML基本结构
<!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server"> <title>layout</title> </head> <body> <divclass="header"> <h1>head of your website.</h1> </div> <divclass="wrapper"> <divclass="content"> <h2>Your website content here.</h2> <scripttype="text/javascript"> for(var i = ; i<;i++){ document.write(i + "<br />"); } </script> </div> <divclass="clear"><!-- 必不可少 --></div> </div> <divclass="footer"> <div><h1> Copyright (c) </h1></div> </div> </body> </html>
2.CSS样式
<styletype="text/css"> *{ margin: ;/* 把默认值都设为0 */ } html, body { height: %; width:%; margin:0auto;/* 居中 */ } .header { height:100px; background-color:Fuchsia; } .wrapper { min-height: %;/* IE6 hack*/ height: auto!important;/* height优先级 */ height: %; margin: 0auto-4em;/* 负值必须等于footer的高度 */ } .content { background-color:Silver; } .clear/* 清除浮动 */ { height: 4em; /* clear的height必须和footer的值样高 */ clear:both; } .footer { height: 4em; background-color:Aqua; } </style>
3.运行
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>test layout</title> <style type="text/css"> *{ margin: 0;/* 把默认值都设为0 */ } html, body { height: 100%; width:85%; margin:0 auto;/* 居中 */ } .header { height:100px; background-color:Fuchsia; } .wrapper { min-height: 100%;/* IE6 hack*/ height: auto !important;/* height优先级 */ height: 100%; margin: 0 auto -4em;/* 负值必须等于footer的高度 */ } .content { background-color:Silver; } .clear /* 清除浮动 */ { height: 4em; /* clear的height必须和footer的值一样高 */ clear:both; } .footer { height: 4em; background-color:Aqua; } </style> </head> <body> <div class="header"> <h1>head of your website.</h1> </div> <div class="wrapper"> <div class="content"> <h2>Your website content here.</h2> <span id="preserve33807f38a7944fcfb0f20ee485333534" class="wlWriterPreserve"><script type="text/javascript"> for(var i = 0; i<100;i++){ document.write(i + "<br />"); } </script></span> </div> <div class="clear"><!-- 必不可少的 --></div> </div> <div class="footer"> <div><h1> Copyright (c) 2012</h1></div> </div> </body> </html>
利用CSS使footer固定在页面底部的更多相关文章
- 让footer固定在页面底部(CSS-Sticky-Footer)
让footer固定在页面底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
- footer固定在页面底部的实现方法总结
方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...
- HTML中footer固定在页面底部的若干种方法
<div class="header"><div class="main"></div></div> <d ...
- HTML 中使 footer 始终处于页面底部
通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位 &l ...
- 在不适用fixed的前提下,当内容较少时footer固定在页面底部
使用css,参考国外的一个解决方法: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ How to use the CSS ...
- Footer固定在页面底部(CSS)
<style type="text/css"> #wapper{ position: relative; /*重要!保证footer是相对于wapper位置绝对*/ h ...
- 让footer固定在页面(视口)底部(CSS-Sticky-Footer)
让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
- 使用css方法使footer保持在页面的最底部
使footer保持在页面的底部,是常见的需求,之前面试的时候也遇见了一个这样的问题,今天在这里记录下css实现的方式. 使footer保持在页面的底部,需要考虑header+content部分不够多的 ...
- 页面元素固定在页面底部的纯css代码(兼容IE6)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Python-pip更改国内源
windows方式: 1.打开任意文件夹,在上方地址栏中输入%appdata% 2.在此目录里新建文件夹pip 3.在pip文件夹里新建文件名:pip.ini 4.把以下内容复制到pip.ini中,保 ...
- Django项目: 项目环境搭建 ---- 三、在码云平台创建项目&推送到码云上
三.在码云平台创建项目 git服务平台: 主要使用github(最主流) 国内访问速度慢 托管私有项目收费 国内一般使用码云gitee 国内访问速度快 托管私有项目免费(限制开发人数) 公司中使用gi ...
- python 拷贝某个文件到另一个目录下
python的shutil包含有很多文件拷贝的函数,各种各样的,要实现我文章题目的目的,使用shutil.copy函数即可 shutil.copy(文件的路径,另一个目录)
- jdk不同版本的垃圾收集器
- c语言学习笔记 - 枚举类型
今天学习了c语言的枚举类型的使用,可能是PHP里没使用过,开始看的时候还是觉得有点怪,后来做了下例子才理解,这里做个笔记记录一下. #include <stdio.h> enum anim ...
- linux 编译C语言代码后产生OBJ文件的方法
如果你不指定编译成什么文件,gcc默认一步到位,直接生成可执行文件你可以试试以下几个参数 -c 只激活预处理,编译,和汇编,也就是他只把程序做成obj文件 例子用法: gcc -c hello.c 他 ...
- 抓取摩拜单车API数据,并做可视化分析
抓取摩拜单车API数据,并做可视化分析 纵聊天下 百家号|04-19 15:16 关注 警告:此篇文章仅作为学习研究参考用途,请不要用于非法目的. 摩拜是最早进入成都的共享单车,每天我从地铁站下来的时 ...
- 如何实现shell并发 一个入门级可控多线程shell脚本方案
如何实现shell并发 很多人都问我如何写shell脚本,如何实现同时给三台ftp服务器上传文件,如何同时检测三台服务器是否alive等,其实这就是想实现shell的并发.那么shell并 ...
- MUI使用vue示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- System.Timer.Timer的一个安全类
class SafeTimer { private static System.Timers.Timer timer; public static Action DoWork; private sta ...