自适应高度

页面自适应问题，有关height是比较头疼的，height有这么几种属性：inherit、100%、auto、calc(100%)，分别都是啥意思呢？
首先说inherit，这个是继承的意思，继承什么呢？就是父类元素的高度。比如：

<template>
    <div class="container">
        <div class="part1"></div>
        <div class="part2"></div>
    </div>
</template>

<script>
    export default {
        name: "list"
    }
</script>

<style lang='scss' scoped>
.container{
    width:100%;
    height:500px;
    background: #ccc;
}
.part1{
    width:inherit;
    height:200px;
    background:red;
}
.part2{
    width:inherit;
    height:inherit;/*继承父类：500px*/
    background:green;
}
</style>

因为父类container声明了height是500px，因此part2的height继承了500px这个属性，它的高度就是500px。
那100%呢？按理说100%就是高度自动充满全屏，但实际上不是这样的，我们必须要声明父类的具体高度，这样百分比才能生效，也就是说，浏览器是通过动态计算高度的，它必须有个参照值才行。

<template>
    <div class="container">
        <div class="part1"></div>
        <div class="part2"></div>
    </div>
</template>

<script>
    export default {
        name: "list"
    }
</script>

<style lang='scss' scoped>
.container{
    width:100%;
    height:500px;/*如果不指定这个高度，part1和part2的高度100%是无法生效的*/
    background: #ccc;
}
.part1{
    width:inherit;
    height:100%;
    background:red;
}
.part2{
    width:inherit;
    height:100%;
    background:green;
}
</style>

auto就是自动撑开的意思，这个会根据内容的高度来决定。

<template>
    <div class="container">
        <div class="part1"></div>
        <div class="part2">

            aaaa <br/>
            bbbb <br/>
            aaaa <br/>
            bbbb <br/>
            aaaa <br/>
            bbbb <br/>
        </div>
    </div>
</template>

<script>
    export default {
        name: "list"
    }
</script>

<style lang='scss' scoped>
.container{
    width:100%;
    height:500px;/*如果不指定这个高度，part1和part2的高度100%是无法生效的*/
    background: #ccc;
}
.part1{
    width:inherit;
    height:200px;
    background:red;
}
.part2{
    width:inherit;
    height:auto;
    background:green;
}
</style>

最后是calc，这个是scss新提供的api。

<template>
    <div class="container">
        <div class="part1"></div>
        <div class="part2">

            aaaa <br/>
            bbbb <br/>
            aaaa <br/>
            bbbb <br/>
            aaaa <br/>
            bbbb <br/>
        </div>
    </div>
</template>

<script>
    export default {
        name: "list"
    }
</script>

<style lang='scss' scoped>
.container{
    width:100%;
    height:500px;/*如果不指定这个高度，part1和part2的高度100%是无法生效的*/
    background: #ccc;
}
.part1{
    width:inherit;
    height:200px;
    background:red;
}
.part2{
    width:inherit;
    height:calc(100% - 200px);
    background:green;
}
</style>