熊猫TV全部分类页面布局实现效果

每天看直播，突然看了一下熊猫TV上的全部分类页面的布局，左边宽度固定不变，右边宽度随窗口宽度变化而变化。于是想了一下要怎么实现。

原效果如下：

实现原理：就是左边用fixed定位浏览器，然后右边的div定位padding-left = 左边的宽度，那么就可以实现左边固定，然后右边随窗口宽度变化而变化了。

效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="telephone=yes" name="format-detection" />
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta name="x5-fullscreen" content="true">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>熊猫TV全部分类页面布局实现效果</title>
    <style>
        * {margin: 0;padding: 0;}
        li{list-style:none;}
        .outbox{position:absolute;/**如果没有这个属性那么height就不会和窗口高度一样**/width:calc(100% - 200px);height:100%;padding-left:200px;}
        .left{position:fixed;width:200px;height:100%;margin-left:-200px;background:blue;font-size:50px;color:#fff;}
        .outbox .middle{height:auto;}
        .outbox .middle li{display:inline-block;width:200px;height:250px;margin:10px;background:red;line-height:250px;line-height:250px;text-align:center;font-size:20px;}
    </style>
</head>
<body>
    <div class="left">
        我是左边的内容
    </div>
    <div class="outbox">
        <div class="left">
            我是左边的内容
        </div>
        <div class="middle">
            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </div>
    </div>
</body>
</html>