布局

1.calc（100% - x）的替换 [如果页头页脚一直存在页面且位置不变，写app文件统一样式]
定位（内部盒子也是撑满剩余屏幕，继续通过定位来达到自适应和兼容各种浏览器）

image.png

情景：header和footer高50px；left固定200px，但是高度自适应屏幕铺满，不出现滚动条，右侧的table也铺满右侧下半部分，自适应

<style scoped lang="scss">
    .body{
        position: relative;
        .header{
            height:50px;
        }
        .content{
            position: absolute;
            top:50px;
            bottom: 50px;//这里做到自适应铺满整屏且无滚动条，自适应屏幕
            left: 0;
            right: 0;
            .left{
                width: 200px;
                height: 100%;
            }
            .right{
                position: absolute;
                left: 200px;
                right: 0;//自动填满右侧区域不出现横向滚动条，自适应屏幕
                top: 0;
                bottom: 0;
                /*同理内部table根据右侧容器定位*/
                .rightOther{
                    width: 100%;
                    height: 200px;
                }
                .rightTable{
                    position: absolute;
                    top: 200px;
                    left: 0;
                    right: 0;
                    bottom: 0;
                }
            }
        }
        .footer{
            position: absolute;
            bottom: 0;//定位到页面底部
            height: 50px;
        }
    }

</style>