关于body体盒模型的问题

关于页面底部滚动条何时出现的问题：
默认是以文档内容的最大宽度为底部滚动条的出现标准。
即，当浏览器缩小至文档最大宽度时底部滚动条出现。

但是，要小心个别元素会撑破文档宽度如(float position的元素)，导致底部滚动条提早出现。

浏览器BODY标签的宽度问题：
body的宽度是随着窗口的缩放而改变的，因为默认是overflow:auto，所以底部滚动条会出现。
父盒子不一定比子盒子宽！因为设定宽度的子盒子是不会随着浏览器的缩放而变化的。
DIV标签若不设定宽度，则默认是父盒子的宽度，这个父盒子有可能追溯到BODY标签，而BODY的宽度是随着窗口的缩放而变化的。

如果页面中没有元素设定宽度，则不论窗口怎样缩放，底部是不会出现滚动条的。

BODY标签的高度问题：

如同普通的div一样，它内容叠加的高度就是它的高度。

可是，当页面内容很少时，body区域能铺满窗口吗？这就是奇妙布局----footer脚粘于窗口底部的原因。

html,body{height:100%;overflow:hidden}   加上这行代码几乎所有的网站都出乎你意料的变了，变的出乎你的意料！

这是结构：

<div id="wrap">

	<div id="header">

	</div>

	<div id="main">

	</div>

</div>

<div id="footer">

</div>

这是css：

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
	padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;} 

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

出自：http://www.cssstickyfooter.com/using-sticky-footer-code.html

总结：

文档的根元素是html，body及所有的div盒子都是依次层层继承。

但是，在html之上仍然有一个东西存在，它影响着整个文档。它就是你的浏览器窗口啊！

html,body{height:100%;width:100%;overflow:hidden}  试试看吧！