网页左侧固定宽度，右侧内容宽度自适应

网页左侧固定宽度，右侧内容宽度自适应

废话不多，先上代码：

css代码

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.outer{
				width: 100%;
			}
			.a{
				width: 200px;
				position: absolute;
				box-sizing: border-box;
				background-color: red;
				height: 300px;
			}
			.b{
				margin-left: 200px;
				background-color: #000000;
				height: 300px;
			}
</style>

HTNL代码：

<div class="outer">
	<div class="a"></div>
	<div class="b"></div>
</div>

外面的大盒子默认宽度为100%，所以我们设置盒子b（内容）左外边距为固定宽度，设置盒子a绝对定位到盒子b左边。

盒子b的宽度会随浏览器窗口大小的改变而改变，而内容左边始终为我们设定的宽度。至此，我们就实现了所需的功能。