常常会碰到需要填满整个浏览器，并且自适应高度的需求。首先肯定会想到给容器设定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. less学习

    // 1.变量:颜色可做+- // from @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light- ...

  2. Dapper.Contrib：GetAsync<T> only supports an entity with a [Key] or an [ExplicitKey] property

    异常处理:http://www.cnblogs.com/dunitian/p/4523006.html#dapper 原来Model是这样滴 修改后是这样滴 注意点:Model里面的Table和Key ...

  3. 前端学HTTP之重定向和负载均衡

    前面的话 HTTP并不是独自运行在网上的.很多协议都会在HTTP报文的传输过程中对其数据进行管理.HTTP只关心旅程的端点(发送者和接收者),但在包含有镜像服务器.Web代理和缓存的网络世界中,HTT ...

  4. ASP.NET Core中如影随形的”依赖注入”[上]: 从两个不同的ServiceProvider说起

    我们一致在说 ASP.NET Core广泛地使用到了依赖注入,通过前面两个系列的介绍,相信读者朋友已经体会到了这一点.由于前面两章已经涵盖了依赖注入在管道构建过程中以及管道在处理请求过程的应用,但是内 ...

  5. Visual Studio 2012远程调试中遇到的问题

    有的时候开发环境没问题的代码在生产环境中会某些开发环境无法重现的问题,或者需要对生产环境代码进行远程调试该怎么办? Vs已经提供给开发者远程调试的工具 下面简单讲讲该怎么用,前期准备:1.本地登录账户 ...

  6. 漫谈C#编程语言在游戏领域的应用

    0x00 前言 随着微软越来越开放,C#也变得越来越吸引人们的眼球.而在游戏行业中,C#也开始慢慢地获得了关注.这不, 网易绝代双娇手游团队已经全面使用.Net Core支持前后端统一C#开发,跨平台 ...

  7. WPF 捕获键盘输入事件

    最近修改的一个需求要求捕获键盘输入的 Text,包括各种标点符号. 最开始想到的是 PreviewKeyDown 或者 PreviewKeyUp 这样的键盘事件. 但是这两个事件的对象 KeyEven ...

  8. jQuery禁用或启用

    禁用:.attr("disabled","disabled"); 启用:.removeAttr("disabled");

  9. BPM公文管理解决方案分享

    一.方案概述 公文作为一种规范性文书,具有法律性.指导性.政令性强的特点,是企事业单位政令上通下达的重要方式.及时.准确.安全地处理.控制和管理公文,方能保障企事业单位正常运转,确保组织权威和政令畅通 ...

  10. Android—Service与Activity的交互

    service-Android的四大组件之一.人称"后台服务"指其本身的运行并不依赖于用户可视的UI界面 实际开发中我们经常需要service和activity之间可以相互传递数据 ...