1.使用浮动的方式
效果图：
代码如下：(注意，此时.content的高度是500px，即父元素的高度，但是浮动元素在 .content 上方，盖住了 .content，将 .nav背景样式改为 background-color: rgba(0,0,0,0.1);可观察到效果)
高度充满父容器
.parent {
height: 500px;
width: 300px;
border: 1px solid red;/***/
padding: 2px 2px;/***/
}
.nav {
height: 100px;
width: 100%;/*必须,沾满宽度防止浮动 */
float: left;/*必须 */
background-color: red;
}
.content {
height:100%;/*必须*/
background-color: green;
}
固定高度
自适应父容器, 充满剩余的空间
2.使用定位
代码如下：(推荐使用此种方法，没有上面的那种方法的缺点)
高度充满父容器
.parent {
position: relative;
height: 500px;
width: 300px;
border: 1px solid red;/***/
padding: 2px 2px;/***/
}
.nav {
height: 100px;
width: 100%;
background-color: red;
}
.content {
position:absolute;
top: 100px;
bottom: 0px;
background-color: green;
width: 100%;
}
固定高度
自适应父容器, 充满剩余的空间
