熊猫TV全部分类页面布局实现效果
时间：09-19
作者：
每天看直播，突然看了一下熊猫TV上的全部分类页面的布局，左边宽度固定不变，右边宽度随窗口宽度变化而变化。于是想了一下要怎么实现。
原效果如下：
实现原理：就是左边用fixed
原效果如下：
实现原理：就是左边用fixed
每天看直播，突然看了一下熊猫TV上的全部分类页面的布局，左边宽度固定不变，右边宽度随窗口宽度变化而变化。于是想了一下要怎么实现。
<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>
原效果如下：
实现原理：就是左边用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>