对于CSS的height:100%，顾名思义，该元素的高度自动填充为其父元素的高度。但该样式有时候会不起作用，Mark down 一下。><

首先，看一下以下CSS代码：

 div {

     height: 100%;

 }

HTML代码：

 <!doctype html>

 <html>

 <head></head>

 <body>

     <p>我的名字叫做甲基苯醌</p>

     <div></div>

 </body>

 </html>

毫无疑问，div的height: 100%完全不起作用（亏得我当时天真地以为div的高度会和p的高度一样，因为body的高度被p撑开了，然后100%就起作用了，呵呵，too young too simple），然后现在回想起来，height:100%不起作用，完全是符合逻辑的。因为body元素在没用设定height的情况下，高度是自适应的，如果div的height:100%起作用的话，那么body的高度必定会被撑开，这时候body的高度 === div的高度 * 2，而div的样式是height:100%，完全不符合我国的科学发展观！！！

要解决这个问题也很简单，添加如下CSS代码：

 htm, body {

     height: 100%;

 }

以此类推，在元素不是绝对，固定的情况下，要想height:100%起作用，那么该元素的父元素的height一定要设置。

那么，现在的问题来了，为什么父元素设置了height，其子元素的height: 100%就会起作用呢？

很明显，父元素设置了高度后，其高度为一个固定值，就算某个子元素设置了height:100%，其高度也不会增加，而且，浏览器对于元素的overflow的默认值是visible，所以就起作用了。

接着，当子元素设置为绝对定位，即使父元素没有设定高度，该子元素的height:100%也会起作用，因为绝对定位的子元素不会撑开父元素的高度和宽度，符合科学发展观！！！！

做过响应式布局的都知道，我想某个div的高度随屏幕的大小而变化，但我又想让这个div有着一些margin或padding的效果，div绝对定位后，设置height:100%，在设置margin或padding就会有一些乱七八糟的问题。解决方案可用以下代码实现。。。。

 div {

     position: absolute;

     height: auto;

     left:;

     top:;

     right:;

     bottom:;

     margin: 20px;

 }

关于height:100%两三事的更多相关文章

  1. height:100% 布局

    常常会碰到需要填满整个浏览器,并且自适应高度的需求.首先肯定会想到给容器设定height:100%,但是会没有效果.原因是body没有高度,所以百分比无法生效. 解决方案:给html,body,标签都 ...

  2. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  3. height:100%与height：inherit的区别

    一.兼容性 首先,inherit这个属性只是在ie8+才支持:100%支持ie6: 二.大多数情况下没有区别 在正常情况下height:100%与height:inherit没有任何区别: 1.父元素 ...

  4. 关于 iframe 在ie11 height:100% 无效的巨坑

    好的,今天公司分配了个解决ie中的bug的任务,其中,有一个就是iframe 的高度 100% 没有生效的问题: 一开始,由于我真的没有怎么去了解过iframe这个货,所以,网上各种搜索一大堆关于这货 ...

  5. flex引起height:100%失效

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 父容器根据子容器高度自适应：设置父容器 height:100%;overflow:hidden;

    父容器根据子容器高度自适应:设置父容器  height:100%;overflow:hidden;

  7. height:100%不起作用（无效），div全屏

    当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段 ...

  8. 如何让 height:100%; 起作用

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

  9. height:100%和height:auto的区别

    一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...

随机推荐

  1. AngularJS入门基础PPT（附下载链接）

    学习了Angularjs有段时间,自己写了一个PPT,个人认为总结的非常全面,对于入门基础够了. 大致模块有:Angularjs简单介绍,Angularjs特性,hello world,Control ...

  2. IE9以下通过css让html页面背景图片铺满整个屏幕

    第一种方法不设为背景图片,通过css来控制样式,可兼容到IE6,代码如下: <!DOCTYPE html> <html lang="en"> <hea ...

  3. windows 数据类型转换为 dotnet 数据类型

    Windows Data Type .NET Data Type BOOL, BOOLEAN Boolean or Int32 BSTR String BYTE Byte CHAR Char DOUB ...

  4. Razor学习（二）@Html标签

    原文链接:http://blog.csdn.net/pasic/article/details/7093802 只是因为原文作者说的东西,还有很多作为基础知识的东西,我都没有掌握,所以总结在这里,蓝字 ...

  5. GDAL与OpenCV2.X数据转换（适合多光谱和高光谱等多通道的遥感影像）

    一.前言 GDAL具有强大的图像读写功能,但是对常用图像处理算法的集成较少,OpenCV恰恰具有较强的图像处理能力,因此有效的结合两者对图像(遥感影像)的处理带来了极大的方便.那么如何实现GDAL与o ...

  6. 在WPF中自定义你的绘制（五）

    原文:在WPF中自定义你的绘制(五) 在WPF中自定义你的绘制(五)                                                                   ...

  7. POJ 2892 Tunnel Warfare (SBT + stack)

    题意:给定了初始的状态:有n个村庄连成一条直线,现在有三种操作: 1.摧毁一个村庄 2.询问某个村庄,输出与该村庄相连的村庄数量(包括自己) 3.修复被摧毁的村庄,优先修复最近被摧毁的........ ...

  8. android安卓开发问题集 XMPP篇

    1.消息推送查了下资料,后面还是使用了androidpn (1)java.security.KeyStoreException: KeyStore jks implementation not fou ...

  9. SignalR with ASP.NET MVC5 可用于倒计时同步

    原文地址:http://www.codeproject.com/Articles/806919/SignalR-with-ASP-NET-MVC

  10. wireshark 过滤条件汇总

    原文地址:http://blog.const.net.cn/a/9340.htm 一.针对wireshark最常用的自然是针对IP地址的过滤.其中有几种情况: (1)对源地址为192.168.0.1的 ...