关于min-height:100%

65 阅读 0 评论 43 点赞

我是靠谱客的博主要减肥楼房，最近开发中收集的这篇文章主要介绍关于min-height:100%，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

有时候min-height:100% 设置了但是还是无法撑起页面，这主要是100% 是基于父元素的，父元素的高度的是一个固定值

html{
  height:100%;
}
body{
  min-height:100%;
}

这样是可以让body撑起来的
所述 html 和 body 元素是不同的块级实体，在父/子关系。
html尺寸由浏览器窗口控制。
该 html 元素具有（默认情况下） overflow:auto，导致在需要时显示滚动条。
所述 body 元件是（默认） position:static，这意味着它的定位的儿童相对于所述定位 html 元件的坐标系。
几乎所有的浏览器，默认的偏移margin是在body元素上，而不是html的padding.（通过做实验确实如此）有些还是body的padding，所有重置页边距用body{margin:0;padding:0}缺一不可。
滚动条从哪里来？原因是

html { overflow:auto;} 是默认的。

如果不设置html height怎么会有滚动条，原来html有点特殊，它的widht和height是有浏览器窗口大小决定的。
所有html，body，div都要设置height为100%。虽然html默认的width和height一样，但是由于body设置的是100%，如果没有
显式设置html，body还是相当于没设置。