height:100%和height:auto到底有什么区别?

零下一度
零下一度 原创
2017-06-30 16:29:43 15843浏览

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

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

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

auto是随内容的高度而撑开的。100%是根据父级元素的高度来决定的。例如:

<div style="height:100px;width:200px;">      <div style="height:auto;width:100px;float:left;">
这个容器的高度是随里面的内容的高度而定
</div>
<div style="height:100%;width:100px;float:right;">这个容器的高度为父级的高度,100px</div> </div>

比如一个表格在另一个表格里面,如果外面的表格高是100,里面表格当是auto的时候,如果表格里面没有东西,它就没有高度,表格里面的内容有多高,它就有多高,而当是100%的时候,无论里面有没有内容,它都和外面的表格是一样高的

以上就是height:100%和height:auto到底有什么区别?的详细内容,更多请关注php中文网其它相关文章!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。