要求：没有数据的时候能够充满屏幕，数据超出屏幕就出现滚动条
做法
1-让容器高度充满这个屏幕
在容器内容很少的情况下，要想让这个容器充满整个屏幕：
`.container{
}`
2-让容器高度充满剩余屏幕高度
要让容器充满屏幕的剩余高度，用 vh 结合 flex 布局就可以实现。
`.content{
}
.header{
}
.content{
}
.footer{
}`
1、首先创建或者打开我们的web项目，新建一个html文件和css文件即可，如图所示。
2、html页面代码如图所示，定义一个div，然后给一个id属性即可。
3、这里是使用宽度的百分比之后，设置高度值为零，然后使用padding属性的top或者bottom的值（可以是任意百分比），背景颜色作为测试。
4、然后在浏览器运行之后的效果是这样的哦，放大缩小浏览器，宽高会随之改变。
5、这个方法是使用expression来设置高度即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html, body { height: 100%margin: 0padding: 0}
.wrap { width: 100%height: 100%}
.fixed { float: leftwidth: 200pxheight: 100% background: #000margin-left: -100%}
.main { float: leftwidth: 100%height: 100%}
.main-inner { margin-left: 200px background: #f00height: 100%}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div class="main-inner">
test
</div>
</div>
<div class="fixed">a</div>
</div>
</body>
</html>
-------
html和body的高度设置为100%, 这样才能让div#wrap的高度生效.
若要将左侧高度固定,将.fixed的height设置为固定值就行了.
