关于height:100%两三事
对于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%两三事的更多相关文章
- height:100% 布局
常常会碰到需要填满整个浏览器,并且自适应高度的需求.首先肯定会想到给容器设定height:100%,但是会没有效果.原因是body没有高度,所以百分比无法生效. 解决方案:给html,body,标签都 ...
- 设置height:100%无效的解决方法
设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...
- height:100%与height：inherit的区别
一.兼容性 首先,inherit这个属性只是在ie8+才支持:100%支持ie6: 二.大多数情况下没有区别 在正常情况下height:100%与height:inherit没有任何区别: 1.父元素 ...
- 关于 iframe 在ie11 height:100% 无效的巨坑
好的,今天公司分配了个解决ie中的bug的任务,其中,有一个就是iframe 的高度 100% 没有生效的问题: 一开始,由于我真的没有怎么去了解过iframe这个货,所以,网上各种搜索一大堆关于这货 ...
- flex引起height:100%失效
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 父容器根据子容器高度自适应：设置父容器 height:100%;overflow:hidden;
父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;
- height:100%不起作用（无效），div全屏
当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段 ...
- 如何让 height:100%; 起作用
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...
- height:100%和height:auto的区别
一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...
随机推荐
- 2014年2月5日 Oracle ORACLE的工作机制[转]
网上看到一篇描写ORACLE工作机制的文章,觉得很不错!特摘录了下来. ORACLE的工作机制-1 (by xyf_tck) 我们从一个用户请求开始讲,ORACLE的简要的工作机制是怎样的,首 ...
- roundcute 添加修改密码插件
添加修改密码插件 现打开main.inc.php 文件,搜索“$rcmail_config['plugins']”,找到: // List of active plugins (in plugins/ ...
- <转>maven发布第三方jar的一些问题
在创建maven中私有仓库过程中,需要发布一些第三方jar到nexus仓库,使用命令的是 deploy:deploy-file 有许多参数,具体可查看 http://maven.apache.org/ ...
- 微信SDK导入报错 Undefined symbols for architecture i386："operator delete[](void*)", referenced from:
异常信息: Undefined symbols for architecture i386: "operator delete[](void*)", referenced fro ...
- LAMP介绍及安装
LAMP介绍及安装 1. LAMP是什么? LAMP,包含Linux + Apache + PHP + Mysql. LAMP适用环境 适用于追求极致稳定的WEB环境,缺点是需要消耗更多资源. 除了L ...
- Kill命令模拟1
#include<sys/types.h> #include<signal.h> #include<stdio.h> #include<stdlib.h> ...
- python socket 编程之三：长连接、短连接以及心跳
长连接:开启一个socket连接,收发完数据后,不立刻关闭连接,可以多次收发数据包. 短连接:开启一个socket连接,收发完数据后,立刻关闭连接. 心跳:长连接在没有数据通信时,定时发送数据包(心跳 ...
- Objextive-C几道小题目笔记
//掷骰子题,掷骰子100次,输出每个号出现的次数 void one() { for (int i=1; i<=100; i++) { int a = arc4random() % 6 +1; ...
- 用Total Commander替换windos默认资源管理器
用Total Commander替换windos默认资源管理器的方法 Total Commander(简称TC)是一个功能强大的资源管理器. TC本身没有自带的替换windows资源管理器的功能,就必 ...
- MYSQL 关于索引的部分问题！
1. PRIMARY KEY也可以只指定为KEY.这么做的目的是与其它数据库系统兼容.二来key 是index的同意词! 2. 在UNIQUE索引中,所有的值必须互不相同.如果您在添加新行时使用的关键 ...