css左侧固定 右侧自适应

在网页开发中，实现左侧固定，右侧自适应是常见需求之一。要实现这个效果，需要使用CSS来对网页布局进行调整。

其中，左侧固定指的是一个区域在浏览器窗口中保持不变，而右侧自适应则是在浏览器窗口大小变化时，自动调整区域大小。在实现上述效果时，可以使用CSS中的定位属性position来进行设置。

/* 定义左侧区域 */
.left {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  background-color: #eee;
}

/* 定义右侧区域 */
.right {
  position: absolute;
  right: 0;
  top: 0;
  left: 200px;
  height: 100%;
  background-color: #fff;
}

代码中，我们首先定义了一个左侧区域的样式，使用了position:fixed，使其在浏览器窗口中保持不变。left:0和top:0分别表示成顶部和左侧对齐。width:200px是宽度，height: 100%则是高度设置为100%，占据整个浏览器窗口的高度。

在定义右侧区域的样式时，使用了position:absolute，表示其相对于已设置了position:relative、fixed或absolute的父元素进行定位，为了保证右侧区域能够自适应，将left的值设置为200px，与左侧区域对齐。height同样设置为100%。

通过这样的设置，我们就实现了一个左侧固定，右侧自适应的布局效果。