HCJ1：页面高度设置为百分百

1.1 简介

当我们做html界面布局时，我们可以使width宽度为100%，从而铺满整个屏幕，但是由于页面高度的不确定，所以， height:100% 属性对于html页面是不生效的。

1.2 解决方法

1.2.1 原理

通过设置顶级父级元素 height：100% ，即可达到目的。

1.2.2 代码

html,body{
	height: 100%;
}

注意： 以上代码确实达到了设置顶级父级高度为100%的目的，但是并不能使整个页面为100%，我们还需要将body下的容器也设置为100%，这样才能撑起父级。如下图所示：

样式代码如下：

.left-pane{
	width: 14%;
	height: 100%;
	float: left;
	background-color: #4b4b4b;
}
.right-pane{
	width: 86%;
	height: 100%;
	overflow: hidden;
	background-color: #dcdcdc;
}

提示： 只有在顶级两个父级高度被限制之后，body子元素才能对 height：100% 生效。

---

留有此文，解今日之惑，便他日之需。