height-100%问题

发表于

一、height:auto

  • 因为页面没有缺省的高度值，当设置百分百的高度时，无法根据父元素获取高度

  • 父元素的高度只是一个缺省值height：auto，只有子元素撑开父元素

只要给父元素设置一个缺省值 

1
2
3
4
5
6
html,body{  
    margin: 0;  
    padding: 0;  
    height: 100%;  
    width: 100%;  
}


二、line-height和height

CSS中对高度起作用的是height和line-height。如果一个标签没有定义height属性(包括百分比高度)，那么其最终表现的高度一定是由line-height起作用 。


在inline box模型中，有个line boxes，这玩意是看不见的，这个玩意的工作就是包裹每行文字。一行文字一个line boxes。line boxes什么特性也没有，就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。


其实line boxes不是直接的生产者，属于中层干部，真正的活儿都是它的手下 – inline boxes干的。line boxes只是个考察汇报人员，考察它的手下谁的实际line-height值最高，谁最高，它就要谁的值，然后向上汇报，形成高度。


三、垂直居中

  • line-height值设置为height一样大小的值可以实现单行文字的垂直居中 (height是多余的)
  • 把line-height设置为您需要的box的大小可以实现单行文字的垂直居中