页面头部和左侧固定并撑满，只有右侧部分内容改变的布局实现

原

• 经常会用到这种布局，怎样实现呢？

<style>
    html{
        height:100%;
    }
    body{
        height:100%;
        margin: 0px;
    }
    .all{
        height:100%;
    }
    .top{
        height:50px;
        position:fixed;
        background-color:blue;
    }
    .left{
        width:15%;
        height:100%;
        position:fixed;
        top:50px;
        left:0px;
        background-color:green;
    }
    .contentbg{
        width:85%;
        height:100%;
        position:fixed;
        top:50px;
        left:85%;
        background-color:orange;
    }
    .content{
        width:85%;
        position:relative;
        left:15%;
        top:50px;
        background-color:red;
    }
</style>
<template>
   <!-- 嵌套在body中  -->
<div class="all">
    <div class="top">1</div>
    <div class="left">2</div>
    <div class="contentbg">3</div>
    <div class="content">4</div>
</div>
</template>

• 试试吧，一定要记住，所有的元素都放在直接能撑开body宽度的盒子了，直接子元素，不能嵌套，不然会被内容撑开高度而不是所有的浏览器高度了。