CSS全屏布局的解决方案

全屏布局指所有元素布满整个窗口，当浏览器窗口大小改变时自动进行伸缩，不会产生全局滚动条。
HTML模板如下：

<header></header>

<div class="content">
	<div class="left"></div>
	<div class="right"></div>
</div>

<footer></footer>

header {
	width: 100%
	height: 100px;
	position: fixed;
	top: 0;
	left: 0;
}
.content {
	width: 100%;
	position: fixed;
	top: 100px; /* header的高度 */
	left: 0;
	bottom: 100px;
	overflow: auto; /* 当子元素内容溢出时，产生局部滚动条 */
}
.content .left {
	width: 300px;
	position: fixed;
	top: 100px; /* header的高度 */
	left: 0;
	bottom: 100px; /* footer的高度 */
}
.content .right {
	height: 100%;
	margin-left: 300px; /* div.left的宽度 */
}
footer {
	width: 100%;
	height: 100px;
	position: fixed;
	bottom: 0;
	left: 0;
}

该策略主要使用fixed定位，将header和footer直接固定在页面的顶部和底部，中间部分也借助fixed定位让其自动铺满指定的部分