height:auto和height:100%的区别

简介:

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

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

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

目录
相关文章
|
2月前
|
前端开发
min-width/max-width 和 min-height/max-height 属性间的覆盖规则
在CSS中,min-width/max-width及min-height/max-height属性用于控制元素的最小和最大尺寸。当min-width与max-width或min-height与max-height属性同时设置时,若它们的值有冲突,max-width和max-height具有更高的优先级。这意味着元素的实际宽度和高度将受限于max-width和max-height的规定,而min-width和min-height则确保了元素不会小于所设定的最小尺寸。
|
1月前
|
前端开发 容器
max-height 属性和 min-height 属性有什么区别?
【10月更文挑战第27天】`max-height`属性和`min-height`属性在控制元素高度方面各有特点和适用场景,通过合理地运用这两个属性,可以更灵活地实现各种页面布局效果,满足不同的设计和功能需求。
|
7月前
|
XML 存储 编解码
svg的viewBox、width和height的设置说明
svg的是没有边界的,svg画布只是用于展示svg世界中某一个范围的内容,而对于超过了svg画布范围的内容,则会被遮挡。默认svg画布默认显示世界坐标下原点坐标的width*height面积的矩形视野。
|
7月前
|
前端开发
line-height与height的区别
line-height与height的区别
74 0
究竟什么时候使用line-height合适------line-height的实际应用
1) 单行文字的垂直居中对齐 把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。这句话确实是正确的,但其实也是有问题的。问题在于height,把line-height设置为您需要的box的大小可以实现单行文字的垂直居中,height是多余的。
40 0
IE6下面,为什么不能设置height:1px的元素
在用DIV构建网页的时候,有时候需要的高度很小,这时候就可能会出现问题,因为,IE6下DIV有个默认的高度,大约10-12px。当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高。
86 0
html+css实战94-内容width和height
html+css实战94-内容width和height
110 0
html+css实战94-内容width和height
|
前端开发
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
529 0
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
|
JavaScript 前端开发