常常会碰到需要填满整个浏览器,并且自适应高度的需求。首先肯定会想到给容器设定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% 布局的更多相关文章

  1. table布局 height=100%无效分析

    (从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-08-11) 原文链接:http://www.cnblogs.com/gaojun/archive/2012/05/07/2487 ...

  2. 关于height:100%两三事

    对于CSS的height:100%,顾名思义,该元素的高度自动填充为其父元素的高度.但该样式有时候会不起作用,Mark down 一下.>< 首先,看一下以下CSS代码: div { he ...

  3. 深入理解CSS系列(二):为什么height:100%不生效?

    对于height属性,如果父元素height为auto,只要子元素在文档流中(即position不等于fixed或者absolute),其百分比值完全就被忽略了.这是什么意思呢?首先来看个例子,比如, ...

  4. 《CSS世界》读书笔记(五) --height:100%

    <!-- <CSS世界> 张鑫旭著 --> 相对简单而单纯的height:auto height:auto比width:auto简单的多,原因在于: CSS默认流是水平方向的, ...

  5. 【CSS系列】height:100%设置div的高度

    一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...

  6. 使flex-direction: column的子元素height: 100%生效的办法

    在flex-direction: column子元素里直接使用height:100%,height并不会被设置成100% <!DOCTYPE html> <html lang=&qu ...

  7. 关于height:100%不生效的问题

    当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...

  8. CSS高度自适应 height:100%;

    在初次尝试高度自适应时都会遇到这样的问题: 对象的heith:100%; 并不能直接产生实际效果 为什么呢?之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码 <!DOCTYPE htm ...

  9. 如何让div中的span垂直居中 ----height:100%设置div的高度

    如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...

随机推荐

  1. 【.net 深呼吸】细说CodeDom(5):类型成员

    前文中,老周已经厚着脸皮介绍了类型的声明,类型里面包含的自然就是类型成员了,故,顺着这个思路,今天咱们就了解一下如何向类型添加成员. 咱们都知道,常见的类型成员,比如字段.属性.方法.事件.表示代码成 ...

  2. ASP.NET Core应用的错误处理[2]:DeveloperExceptionPageMiddleware中间件如何呈现“开发者异常页面”

    在<ASP.NET Core应用的错误处理[1]:三种呈现错误页面的方式>中,我们通过几个简单的实例演示了如何呈现一个错误页面,这些错误页面的呈现分别由三个对应的中间件来完成,接下来我们将 ...

  3. 首个threejs项目-前端填坑指南

    第一次使用threejs到实际项目中,开始的时候心情有点小激动,毕竟是第一次嘛,然而做着做着就感受到这玩意水好深,满满的都是坑,填都填不过来.经过老板20天惨无人道的摧残,终于小有成就. 因为第一次搞 ...

  4. JS与APP原生控件交互

    "热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显 ...

  5. Android权限管理之Permission权限机制及使用

    前言: 最近突然喜欢上一句诗:"宠辱不惊,看庭前花开花落:去留无意,望天空云卷云舒." 哈哈~,这个和今天的主题无关,最近只要不学习总觉得生活中少了点什么,所以想着围绕着最近面试过 ...

  6. 尝试asp.net mvc 基于controller action 方式权限控制方案可行性

    微软在推出mvc框架不久,短短几年里,版本更新之快,真是大快人心,微软在这种优秀的框架上做了大量的精力投入,是值得赞同的,毕竟程序员驾驭在这种框架上,能够强力的精化代码,代码层次也更加优雅,扩展较为方 ...

  7. NLP点滴——文本相似度

    [TOC] 前言 在自然语言处理过程中,经常会涉及到如何度量两个文本之间的相似性,我们都知道文本是一种高维的语义空间,如何对其进行抽象分解,从而能够站在数学角度去量化其相似性.而有了文本之间相似性的度 ...

  8. [转载]SQL Server 2008 R2安装时选择的是windows身份验证,未选择混合身份验证的解决办法

    安装过程中,SQL Server 数据库引擎设置为 Windows 身份验证模式或 SQL Server 和 Windows 身份验证模式.本文介绍如何在安装后更改安全模式. 如果在安装过程中选择&q ...

  9. ABAP单元测试最佳实践

    本文包含了我在开发项目中经历过的实用的ABAP单元测试指导方针.我把它们安排成为问答的风格,欢迎任何人添加更多的Q&A's,以完成这个列表. 在我的项目中,只使用传统的ABAP report. ...

  10. 基于开源项目SharpMap的热力图(HeatLayer)实现。

    当前公司需要一个用时较少的热力图呈现方案,在避免较底层的GDI开发和比较了多家GIS产品的实际效果之后,团队决定用sharpMap的API来实现,由于之前框架采用的是另外一个开源项目GMap.net, ...