height:100%失效
以下两种情况height:100%才会生效
1. 父级设置了具体高度;从html根元素一直往下都赋予height:100%
也是属于设置具体高度,如:html=>body=>...=>父级=>目标元素;
2. 父级相对定位,自身绝对定位,则自身可使用height:100%
注意:子元素绝对定位时,计算子元素的height:100%是包含的 padding 值的。而传统的height:100%
是不包含padding值的;当然如果使用全局的box-sizing: border-box
就不用担心了。
height:100%
与height: inherit
的不同
如果父级是position:static
,而子级是position: absolute
,则子元素已经脱离文档流,其父级就是最近的定位元素。height:100%
的对象就不是它真正的父级了。但是height: inherit
就不出现这种问题。
设置 max-height
与 min-height
对height:100%
的多数情况是没用的,它们只是设置边界而不是设置具体值。
box-sizing
box-sizing规定两个并排的带边框元素的框;box-sizing属性有三个可选值:
inherit:继承
content-box:border和padding不计算入width之内;即,在元素宽度和高度之外绘制元素的内边距和边框。
border-box:border和padding计算入width内;即,为元素指定的任何内边距和边框都将在已设定宽度和高度的元素内部进行绘制,通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
注:使用box-sizing时,必须设置元素的宽度或高度;