先看具体代码
这里有两个问题。
- 给外层div设置min-height 100%能正常工作,然后内层div再设置height 100%,结果并没有如预想的那样覆盖整个外层div,这是为什么呢?
- 还有我们可以看到外层div上部有一段空距,可我们明明已经给body设置了padding:0,marging:0了,这又是为什么呢?
当我们设置height的值为百分比的时候,是相对于指定元素的父元素而言,并且父元素需要显示的指定高度,否则视为无效,同样的,width也是如此。在例子中,我们虽然给wrapper指定了min-height,但并没有指定height。
因为main包含了一个h1,而h1默认是有margin的,而后根据margin的合并原则,main也有了相应的top margin,再上一步,就反映在wrapper中,所以这也是为什么我们要使用reset css的原因。