[分享]css中左固定右自适应

CSS中的左固定右自适应是一种常用的布局方式，常见于网页中的导航栏和侧边栏。左侧固定区域可以包含logo、导航菜单等，而右侧则根据浏览器窗口的大小自适应。.left{ : fixed; / 定位方式为...

CSS中的左固定右自适应是一种常用的布局方式，常见于网页中的导航栏和侧边栏。左侧固定区域可以包含logo、导航菜单等，而右侧则根据浏览器窗口的大小自适应。

.left{
   position: fixed; /* 定位方式为固定 */
   left: 0; /* 左侧为0 */
   top: 0; /* 顶部为0 */
   width: 200px; /* 宽度为200px */
}

.right{
   margin-left: 200px; /* 右侧区域距离左侧固定区域200px */
   min-height: 100%; /* 最小高度为100% */
   background-color: #f5f5f5; /* 背景颜色为灰色 */
   padding: 20px; /* 内边距为20px */
} 

上述代码中，.left表示左侧固定区域的样式，使用position: fixed将元素的定位方式设为固定。然后，设置left和top为0，确保元素在左上角固定。最后，设置宽度为200px，适当调整大小可以达到最佳效果。

而.right则表示右侧区域的样式，由于左侧已经固定为200px，因此需要使用margin-left: 200px把右侧区域顶开。此外，设置min-height: 100%确保右侧区域至少占用整个视口的高度。最后，为背景色和内边距添加了额外的样式。

使用左固定右自适应的样式可以帮助网页设计师创建优美而实用的网页布局，同时还能够保持灵活性和响应度。