VUE 元素根据屏幕高度自动调整自身高度

需求：
页面有固定高度的头部header [height:60px]，底部footer [height:100px]。现在要求内容区域，根据浏览器所在的屏幕大小自动调整，即大屏幕，内容区域就高，小屏幕，内容区域就矮一点，自动调整。比如，当屏幕高度为1160px时，那么内容区域高度应该为1000px，当屏幕高度为560px时，那么内容高度应该为400px。[这里，内容区高度 = 屏幕高度 - 头部高度 - 底部高度]
解决方案：
可通过VUE对class，style动态绑定方案，满足这个需求。
代码如下：
css.css

.header {
    background-color: #333333;
    width: 100%;
    height: 60px;
}

.content {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
}

/*伪类元素*/
.content:after {
    content: "";
    display: block;
    clear: both;
}

.content .directory {
    background-color: #f9f9f9;
    width: 240px;
    float: left;
}

.content .itemlist {
    background-color: #CCCCCC;
    width: 240px;
    float: left;
}

.footer {
    background-color: #333333;
    width: 100%;
    height: 100px;
}

index.html

效果如下：

image.png