PC端两栏布局：固定栏与滚动栏的完美结合
在网页设计中，经常需要实现两栏布局，其中一栏固定，另一栏可滚动。本文将介绍如何利用CSS巧妙解决这个问题，特别是如何避免因分辨率变化导致固定栏位置偏移的问题。
以往使用position: fixed结合百分比实现固定栏，但百分比会随分辨率变化，导致位置不稳定。单纯使用其他定位方式又无法达到固定效果。
最佳解决方案：结合CSS Grid布局和position: sticky属性。
以下代码示例演示了如何实现：
两栏布局
页眉
左侧内容
右侧内容
代码说明：
-
grid-template-columns: 9fr 3fr;定义两栏比例为9:3。 -
grid-area指定各栏在Grid中的位置。 -
position: sticky使右侧栏滚动到顶部时固定，top: 50px确保其位于页眉下方。 -
width: 1000px; margin: 0 auto;保证容器居中显示。 -
overflow-y: auto;允许左侧内容区域滚动。 - 页眉也使用
position: sticky实现粘性顶部效果。
通过此方法，即使分辨率改变，两栏比例不变，右侧栏也能稳定固定在指定位置，左侧栏可自由滚动。
