php架在底部页面,页脚始终保持在页面底部的网页布局方法
页脚始终保持在页面底部的网页布局方法
导语:用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事。下面就由百分网小编为大家介绍一下页脚始终保持在页面底部的网页布局方法,希望对大家能有所帮助。
步骤:
1、为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值,同时清除所有元素的 margin 和 padding。顺便提一下,经过我的测试,html 和 body 的 height: 100%; 等于整个浏览器窗口的总高度,无论内容是否超过一屏。而它们下一级子元素 height: 100%; 则等于第一屏的.高度。如何,是不是有点不好理解?
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
2、因为上面提到的问题,所以为了让布局自适应高度,我们要加上 min-height: 100%;,虽然IE不支持这个属性但是IE的 height: 100%; 有同样的作用:
#wrapper {
min-height: 100%;
}
* html #wrapper {
height: 100%;
}
这样,一个最简单的最小高度满一屏的自适应布局就做好了。为了便于查看,我加了一些宽度和背景色修饰,如下:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
text-align: center;
font: 12px/1.4 Verdana, sans-serif;
background: #f00;
}
#wrapper {
width: 770px;
min-height: 100%;
background: #ccc;
margin: auto;
text-align: left;
}
* html #wrapper {
height: 100%;
}
jzxue.com-建站学
/*
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
text-align: center;
font: 12px/1.4 Verdana, sans-serif;
background: #F00;
}
#wrapper {
width: 770px;
min-height: 100%;
background: #ccc;
margin: auto;
text-align: left;
}
* html #wrapper {
height: 100%;
}
#header {
background: Green;
height: 40px;
}
#sidebar {
float: left;
width: 200px;
background: Gray;
}
#content-box {
float: right;
width: 570px;
background: Olive;
}
#footer {
height: 50px;
background: Background;
width:770px;
margin: auto;
}
/*]]>*/
此处显示 id "header" 的内容
此处显示 id "content-box" 的内容
此处显示 id "sidebar" 的内容
此处显示 id "footer" 的内容
【页脚始终保持在页面底部的网页布局方法】相关文章:
php架在底部页面,页脚始终保持在页面底部的网页布局方法相关推荐
- CSS + DIV 让页脚始终保持在页面底部
来源:David's Blog http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...
- html页脚位置调整,将页脚始终控制在页面最下方的几种方法
html和body的高度并不一定相同,在内容少的时候,body的高度要小于html,当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候,此时html的高度大于body的高度.网页 ...
- 在html用div怎样写页脚,使用div+CSS将页脚始终控制在页面最下方的方法
tml和body的高度并不一定相同,在内容少的时候,body的高度要小于html,当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候,此时html的高度大于body的高度.网页中 ...
- php 底部页面层,html 设置页脚div一直在页面底部
先上代码 //这部分的div的 position 是 fixed 解析: 1.先设置的 height 为 100%: 2.设置 body 的position 为 absolute,因为它里面的 div ...
- html 在div 底部显示不出来,html 设置页脚div一直在页面底部
先上代码 //这部分的div的 position 是 fixed 解析: 1.先设置的 height 为 100%: 2.设置 body 的position 为 absolute,因为它里面的 div ...
- 如何确保页脚始终位于页面底部?
在尝试创建精美的网站时,防止页脚在页面上浮动非常重要.内容较短的页面可能会遇到此问题,但只需几行 CSS 即可轻松修复.假设您的 HTML 看起来像下面的代码片段,这里有两种现代方法可以确保页脚始终位 ...
- CSS + DIV 让页脚始终底部
原文:CSS + DIV 让页脚始终底部 一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部, ...
- JS实现让页脚一直固定在页面底部
2019独角兽企业重金招聘Python工程师标准>>> JS实现页脚在浏览器可视范围内始终置底. 如下图所示: 代码如下: <!DOCTYPE html> <htm ...
- DIV+CSS:页脚永远保持在页面底部
页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...
最新文章
- 为了成长,我所做的一些努力!
- c语言数组中的字母可以相等吗,C语言数组比较
- SAP物料移动类型和自动科目设置(包含财务,pp)
- tp 查询3天内是否有记录_DNF:玩家哭诉没坐过飞机,被吧主实锤打脸,TP制裁强行背锅...
- 二十六、数据挖掘电力窃漏电用户自动识别
- USB 设备类协议入门【转】
- HTTP缓存解释为何页面响应的数据和服务端的不一致
- python画关系网图_使用python绘制人人网好友关系图示例
- 在那些打磨汉芯的日子里[转贴]
- cad安装日志文件发生错误_Autocad 2012 安装失败,某些产品无法安装。有日志文件,拜托求大神帮忙看看如何解决?...
- U盘拷贝时提示文件过大
- 高端存储十面埋伏 华为全闪存系列亮剑出击
- 如何把PDF拆分成单页文档
- 手工制作使用WinXShell的PE(不是直接生成) #1
- 计算机班级学生分析,【本班学生学业成绩状况】_本班学生情况分析报告
- 弱电人要学习的网络安全基础知识
- Centos8搭建并应用NIS服务
- ctfshow-web78(文件包含)
- 由SoC到SOPC、SoC FPGA ,异同优缺点的介绍及常见应用场景
- python常用PEP收集
热门文章
- 工作总结:日志打印的15个建议
- 你以为用了BigDecimal后,计算结果就一定精确了?
- HashMap 为什么会导致 CPU 100%?文章看不懂?来看这个视频吧!——面试突击 006 期...
- 面试官 | Java 对象不使用时为什么要赋值为 null?
- Chrome浏览器必装的扩展工具
- JDBC(Java语言连接数据库)
- C#中IEnumerableT.Aggregate()的简单使用
- 字符串的模式匹配--BF算法KMP算法
- ssh远程执行命令 linux,【Linux】SSH 远程执行命令
- php实现ftp上传,PHP_PHP实现ftp上传文件示例,FTP上传是PHP实现的一个常见且 - phpStudy...