height:100% 布局
常常会碰到需要填满整个浏览器，并且自适应高度的需求。首先肯定会想到给容器设定height：100%，但是会没有效果。原因是body没有高度，所以百分比无法生效。
解决方案：给html，body，标签都加上height：100%
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding:0;margin: 0;}
html,body,.d1{height: 100%;}
.d1{background-color: red;height: 100%;}
</style>
</head>
<body>
<div class="d1"></div>
</body>
</html>
在此基础上又会衍生一些变体，比如上下2行布局，第一行固定高度，第二行自适应浏览器。要自适应浏览器高度，那么也只能用height：100%；但有个问题，就是多出了其余部分的高度
方案一：overflow:hidden
优点：简单
缺点：可能内容溢出
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding:0;margin: 0;}
html,body,.d1{height: 100%;}
body{overflow:hidden;}
.d1{background-color: red;height: 200px}
.d2{height:100%;background-color:blue;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
方案二：position：absolute/fixed，不设定高度，只设定top，bottom值，会自动拉伸填充
优点：动态计算除了固定高度外的剩余高度
缺点：
兼容：absolute --- ie8+ fixed ---- ie7+
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
html,body{height: 100%;}
.div1{height: 200px;background-color: red;position: absolute;width: 100%;top: 0;left: 0;}
.div2{position: absolute;top: 200px;bottom: 0;width: 100%;}/*绝对定位 动态计算高度 ie8 及以上*/
.div3{height: 100%;float: left;width: 200px;background-color: blue;}
.div4{height:100%;margin-left: 200px;background-color: yellow}
</style>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
<div class="div3">
</div>
<div class="div4">
</div>
</div> </body>
</html>
方案三：css3 box-sizing改变和模型，用padding抵消固定高度
优点：完美自适应
缺点：
兼容：ie8+
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
html,body{height: 100%;}
.div1{height: 200px;background-color: red;position: absolute;width: 100%;top: 0;left: 0;}
.div2{height: 100%;padding-top: 200px;box-sizing:border-box;}/*脱离文档流，改变和模型计算方式，此法用于ie8 及以上*/
.div3{height: 100%;float: left;width: 200px;background-color: blue;}
.div4{height:100%;margin-left: 200px;background-color: yellow}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">
<div class="div3">
</div>
<div class="div4">
</div>
</div> </body>
</html>
方案四：利用table布局中的行会自动填满剩余table空间
优点：
缺点：比较麻烦，重新定义display 或者，用table布局
兼容：ie8+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html,
body,
#box {
height:100%;
font:small/1.5 "宋体", serif;
}
body {
text-align:center;
}
#box {
text-align:left;
background:#666;
display:table;
width:80%;
margin:0 auto;
position:relative;
}
#box > div {
display:table-row;
}
#header,
#footer {
background:#fcc;
height:50px;
vertical-align:bottom;
}
#main {
background:#ccf;
}
#main #wrap {
display:table-cell;
background:#ffc;
vertical-align:middle;
}
#text {
text-align:center;
}
</style> </head>
<body>
<div id="box">
<div id="header">header</div>
<div id="main"> </div>
<div id="footer">footer</div>
</div>
</body>
</html>
height:100% 布局的更多相关文章
- table布局 height=100%无效分析
(从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-08-11) 原文链接:http://www.cnblogs.com/gaojun/archive/2012/05/07/2487 ...
- 关于height:100%两三事
对于CSS的height:100%,顾名思义,该元素的高度自动填充为其父元素的高度.但该样式有时候会不起作用,Mark down 一下.>< 首先,看一下以下CSS代码: div { he ...
- 深入理解CSS系列（二）：为什么height:100%不生效？
对于height属性,如果父元素height为auto,只要子元素在文档流中(即position不等于fixed或者absolute),其百分比值完全就被忽略了.这是什么意思呢?首先来看个例子,比如, ...
- 《CSS世界》读书笔记（五） --height:100%
<!-- <CSS世界> 张鑫旭著 --> 相对简单而单纯的height:auto height:auto比width:auto简单的多,原因在于: CSS默认流是水平方向的, ...
- 【CSS系列】height:100%设置div的高度
一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...
- 使flex-direction: column的子元素height: 100%生效的办法
在flex-direction: column子元素里直接使用height:100%,height并不会被设置成100% <!DOCTYPE html> <html lang=&qu ...
- 关于height:100%不生效的问题
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...
- CSS高度自适应 height:100%;
在初次尝试高度自适应时都会遇到这样的问题: 对象的heith:100%; 并不能直接产生实际效果 为什么呢?之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码 <!DOCTYPE htm ...
- 如何让div中的span垂直居中 ----height:100%设置div的高度
如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...
随机推荐
- SQL Server中的高可用性（2）----文件与文件组
在谈到SQL Server的高可用性之前,我们首先要谈一谈单实例的高可用性.在单实例的高可用性中,不可忽略的就是文件和文件组的高可用性.SQL Server允许在某些文件损坏或离线的情况下,允 ...
- TODO：Golang指针使用注意事项
TODO:Golang指针使用注意事项 先来看简单的例子1: 输出: 1 1 例子2: 输出: 1 3 例子1是使用值传递,Add方法不会做任何改变:例子2是使用指针传递,会改变地址,从而改变地址. ...
- 08.LoT.UI 前后台通用框架分解系列之——多样的Tag选择器
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- 自己实现简单Spring Ioc
IoC则是一种 软件设计模式,简单来说Spring通过工厂+反射来实现IoC. 原理简单说明: 其实就是通过解析xml文件,通过反射创建出我们所需要的bean,再将这些bean挨个放到集合中,然后对外 ...
- 设计模式C#合集--单例模式
单例模式 代码: 第一种: private static Singleton singleton = null; private Singleton() { } public static Singl ...
- Java—恶心的java.lang.NumberFormatException解决
项目中要把十六进制字符串转化为十进制, 用到了到了Integer.parseInt(str1.trim(), 16):这个是不是后抛出java.lang.NumberFormatException异常 ...
- 安卓GreenDao框架一些进阶用法整理
大致分为以下几个方面: 一些查询指令整理 使用SQL语句进行特殊查询 检测表字段是否存在 数据库升级 数据库表字段赋初始值 一.查询指令整理 1.链式执行的指令 return mDaoSession. ...
- angularjs 1 开发简单案例(包含common.js,service.js,controller.js,page)
common.js var app = angular.module('app', ['ngFileUpload']) .factory('SV_Common', function ($http) { ...
- mysql 写入优化
1 主从分离 从表读取,主表可以去掉索引 2 先写入到文件或redis,定时刷新到库 3 用nginx 4 分库 分表 每个库表的数据总量少了 插入会快一点 5 最大限度减少查库的次数 6 一条sql ...
- Ubuntu 16.04 安装 arm-linux-gcc 嵌入式交叉编译环境 问题汇总
闲扯: 实习了将近半年一直在做硬件以及底层的驱动,最近要找工作了发现了对linux普遍要求很高,而且工作岗位也非常多,所以最近一些时间在时不时地接触linux. 正文:(我一时兴起开始写博客,准备不充 ...