一直不明白height:100%和height:auto的区别，最近在制作前端页面时都用了height:100%;overflow:hidden; ，可是有些浏览器出现莫名的奇妙的问题，但换成height:auto就好了，百度过这个问题，却一直没有细看。

今天又浮现了同样的问题，百度细看和群里的朋友指点，终于明白其中的道理，记录一下。

height:auto，是指根据块内内容自动调节高度。
height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。

<参考：http://blog.sina.com.cn/s/blog_601b97ee0101dtwk.html>

height:100%和height:auto的区别的更多相关文章

  1. css height:100%和height:auto的区别

    css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...

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

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

  3. width:100%;与width:auto;的区别

    <div> <p>1111</p> </div> div{ width:980px; background-color: #ccc; height:30 ...

  4. height:100% 布局

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

  5. jQuery中的height()、innerheight()、outerheight()的区别总结

    在前端jQuery代码中突然看到outerheight(),第一感觉就是,这是什么鬼?然后仔细查阅了一下,居然发现还有这么多相似的东西. 在jQuery中,获取元素高度的函数有3个,它们分别是heig ...

  6. flex引起height:100%失效

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

  7. css设置height 100%

    需要显式设置html,body为100%,body是相对于html,wrapper是相对于body html,body{ height: 100%; } .wrapper{ height: 100; ...

  8. height:100%失败

    height显然,设置100% 为什么不能看到效果.非常多的时间不是很扎实的时间的基础上,,经常会遇到这样的问题,原因很简单的事实 首先,你必须确保 html{height:100%;} body{h ...

  9. 对height 100%和inherit的总结

    对height 100%和inherit的总结 欢迎大家来我的博客留言:https://sxq222.github.io/CSS%...博客主页:https://sxq222.github.io 正文 ...

随机推荐

  1. 使用Chrome或Fiddler抓取WebSocket包

    首先,HTTP是建立在TCP协议基础上的,而WebSocket通常也是建立在TCP上,所以说为什么有些网页游戏抓不到包而有些又可以,这仅是因为你使用的抓包工具是针对了HTTP的通信协议. 我先从抽象的 ...

  2. Bzoj1001 [BeiJing2006]狼抓兔子

    Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 19759  Solved: 4883 Description 现在小朋友们最喜欢的"喜羊羊与 ...

  3. 关于 htonl 和 ntohl 的实现

    因为需要直接处理一个网络字节序的 32 位 int,所以,考虑用自己写的还是系统函数效率更高.然后又了下面的了解. 首先是系统函数 htonl ,我在 kernel 源码 netinet/in.h 找 ...

  4. POJ 1064 Cable master （二分）

    题目链接: 传送门 Cable master Time Limit: 1000MS     Memory Limit: 65536K 题目描述 有N条绳子,它们长度分别为Li.如果从它们中切割出K条长 ...

  5. django入门记录 2

    1. 创建一个app, python manage.py startapp  appname 2. 设计model,在appname/目录下编辑好model 3. 检测model的修改,python ...

  6. Mac下同时安装多个版本的JDK

    JDK8 GA之后,小伙伴们喜大普奔,纷纷跃跃欲试,想体验一下Java8的Lambda等新特性,可是目前Java企业级应用的主打版本还是JDK6, JDK7.因此,我需要在我的电脑上同时有JDK8,J ...

  7. Mouse.OverrideCursor

    介绍: 获取和设置整个应用程序的光标,WPF父元素将覆盖所有子元素的光标. WPF设置控件的光标: WPF 中每个光标通过一个System.Windows.Input.Cursor表示, 获取Curs ...

  8. SaltStack之无Master和多Master（九）

    SaltStack之无Master和多Master Masterless架构,无Master 实现方式: 1)关闭minion进程 2)修改配置文件 vi /etc/salt/minion file_ ...

  9. CentOS7安装hive-2.1.0

    环境: CentOS7 Hadoop-2.6.4,配置两个节点:master.slave1 mysql-server 过程: 下载.解压hive-2.1.0到/usr/hadoop-2.6.4/thi ...

  10. CentOS7安装Ambari

    环境: CentOS7安装两个节点:master.slave1.并配置ssh无密码登录. 步骤: 获取 Ambari 的公共库文件(public repository): wget http://pu ...