效果如下：
代码如下：
<!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>