发现好玩的问题，思考并解答是一个很快乐的过程~
浏览博问时看到了一个 div + css 布局问题，需要左侧区域宽度固定，右侧区域自动填满。
这样的需求有时候会在项目中遇到，正巧碰见了做个记录以备后用。
有很多的结题思路，这里先说一个立马想到的解决方法：
1、想要实现左侧固定很好办，直接给固定 width 就好了。
2、而右侧的宽度自适应，又不能通过 jquery 来获取宽度计算并设置，那就只能通过 width 100% 来设置。
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <style> .leftPart { background: grey; width: 400px; height: 200px; } .rightPart { height: 200px; background: black; width: 100%; } </style> </head> <body> <div class='leftPart'></div> <div class='rightPart'></div> <script> </script> </body> </html>
3、那为了使他俩一行，就得对一个做 position absolute 处理，当然要 position 固定宽度的啦！给他加一个 position 属性。
.leftPart {
position:absolute;
}
4、一行了之后，右侧内容要与左侧内容分开，那就得右侧加个padding-left 来将左侧区域的位置让出来。多加 10px 给点距离。
.rightPart {
padding-left: 410px;
}
5、这样还不美，那右侧怎样才能向左侧区域独立出来呢，万一里面元素要position 啥的不还得算padding-left？那麻烦死了，于是乎在里面加个div，设置宽高 100%。这样右侧区域也独立出来了。
<div class='rightPart'> <div class='rightContent'></div> </div> .rightPart { height: 200px; padding-left: 410px; } .rightContent { background: grey; 100%; height: 100%; }
最终我们实现出了效果：
完全代码：
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <style> .leftPart { position:absolute; background: grey; width: 400px; height: 200px; } .rightPart { height: 200px; padding-left: 410px; } .rightContent { background: grey; width: 100%; height: 100%; } </style> </head> <body> <div class='leftPart'></div> <div class='rightPart'> <div class='rightContent'></div> </div> <script> </script> </body> </html>