SOURCE

<div class="page-container">
    <!-- 头部 -->
    <div class="header"></div>

    <!-- 中间 -->
    <div class="main">
        <!-- 中间的左边 -->
        <div class="main-l"></div>
        <!-- 中间的右边 -->
        <div class="main-r"></div>
    </div>

    <!-- 脚部 -->
    <div class="footer"></div>
</div>

* {
    margin: 0;
    padding: 0;
}

.page-container {
    width: 100vw;
    height: 100vh;
    /* background-color: blue; */
}

.header {
    height: 48px;
    background-color: yellow;
}

.main {
    height: 500px;
    font-size: 0;
}

.main .main-l {
    display: inline-block;
    width: 200px;
    height: 100%;
    background-color: yellowgreen;
}

.main .main-r {
    display: inline-block;
    width: calc(100% - 200px);
    height: 100%;
    background-color: gray;
}

.footer {
    height: 48px;
    background-color: green;
}