一直不明白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. 环信Restfull API dotnetSDK

    Easemob.Restfull4Net 环信Restfull API dotnet的封装 支持的.Net Framework版本:4.0 API地址:http://docs.easemob.com/ ...

  2. Linux inode && Fast Directory Travel Method(undone)

    目录 . Linux inode简介 . Fast Directory Travel Method 1. Linux inode简介 0x1: 磁盘分割原理 字节 -> 扇区(sector)(每 ...

  3. Process Kill Technology && Process Protection Against In Linux

    目录 . 引言 . Kill Process By Kill Command && SIGNAL . Kill Process By Resource Limits . Kill Pr ...

  4. C++自问自答

    1.为什么派生层次上的类,同一个虚函数在各个类的虚表中的位置一样?         因为:对虚函数的调用是通过虚指针+偏移地址构成,由于对虚函数的调用都是通过这种方式,所以对同一个虚函数的偏移值就必须 ...

  5. soapUI测试webservice（参数为xml格式的处理方式）

    如果传递的是xml,要用<![CDATA[   ]]>将xml注释为字符串 示例 <?xml version="1.0" encoding="UTF-8 ...

  6. python 内置函数和函数装饰器

    python内置函数 1.数学相关 abs(x) 取x绝对值 divmode(x,y) 取x除以y的商和余数,常用做分页,返回商和余数组成一个元组 pow(x,y[,z]) 取x的y次方 ,等同于x ...

  7. PhyLab2.0需求与功能分析改进文档（NABCD）

    PhyLab1.0需求规格说明文档 1. 概述 1.1 项目概述 软剑攻城队小组于2015学年开发了PhyLab物理实验网站,一经发布好评如潮.网站的核心功能是提供预习报告和自动数据处理,而后加入了论 ...

  8. Mysql学习笔记（七）mysql编程基础之自定义函数。

    delimiter $$ create function fn_liangzifunction() returns int no sql begin ; return @row_no; end; $$ ...

  9. JavaScript中局部变量与全局变量的不同

    JavaScript中局部变量与全局变量 我们知道,JavaScript的变量是松散型的变量,也就是说,其变量只需用var声明,其赋值的类型是不限定的.比如: var person=18; perso ...

  10. glade2支持C++代码的输出(3)

    今天完成了glade-2生成configure.ac/Makefile.am等调整 代码为:cpp_out_4.patch.zip BaseObject类也做了一些小的调整:BaseObject.00 ...