CSS两侧固定宽度高随父元素变化，中间宽度随窗口宽度变化而变化布局效果

效果如下：

代码如下：

<!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>CSS两侧固定宽度高随父元素变化，中间宽度随窗口宽度变化而变化布局效果</title>
    <style>
        * {margin: 0;padding: 0;}
        li{list-style:none;}
        #Box{position: relative;padding:0 200px;}
        #Box .left{position:absolute;left:0;top:0;width:200px;height:100%;background:blue;font-size:50px;color:#fff;}
        #Box .right{position:absolute;right:0;top:0;width:200px;height:100%;background:blue;font-size:50px;color:#fff;}
        #Box .outbox .middle{height:auto;}
        #Box .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 id="Box">
        <div class="left">
            我是左边的内容
        </div>
        <div class="outbox">
            <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>
        <div class="right">
            我是右边的内容
        </div>
    </div>
</body>
</html>