布局

最近使用了不少上下固定，中间自适应，超出出现滚动条的布局：

外层 高度宽度都设置为100%  overflow：hidden

上下固定高度，比如：上下高度都是  40px

那么  中间高度就是    calc(100% - 40px - 40px); overflow-y: auto/scroll;如果不需要横向滚动条就overflow-x:hidden

<template>

<div class='dv'>

<div class='top-dv'>

</div>

<div class='content-dv'>

</div>

<div class='bottom-dv'>

</div>

</div>

</template>

<script>

</script>

<style scoped lang="scss" type="text/scss">

.dv{

width:100%;

height:100%;

overflow: hidden;

.top-dv,.bottom-dv{

width: 100%;

height: 40px;

}

.content-dv{

width:100%;

height:calc(100% - 40px - 40px);

overflow-y: auto; // 纵向滚动条显示

overflow-x: hidden; // 横向滚动条不显示

}

}

</style>