仅滚动部分页面的html布局

我想创建一个分为3部分的页面布局——一列固定宽度，包含两行固定高度。以及另一个具有固定宽度的列，该列可能包含多个项目（超出视图范围）

我正在寻找一种方法，使页面滚动只影响items列，这样屏幕的左侧（第一列）仍保持在视图中

以下是布局的示例图像，以更好地说明其含义：

---

为什么不将您的物品容器向右浮动，然后在左侧列中添加一个位置：固定

.left{位置：固定；宽度：70%}
.right{float:right；width:30%；}

此内容是固定的，不会滚动

项目>
项目>
项目>
项目>
项目>
项目>
项目>
项目>
项目>
项目>
项目>
项目>
项目>
项目>
项目>
项目>
项目>
项目>
项目>
项目>
项目>

为右侧列应用

溢出：自动。看看下面的示例HTML

<div style="width:450px;">
  <div style="float:left; width:300px">
       <div style="height:120px; border:1px solid #ff00ff;">Testing Content</div>
       <div style="height:200px; border:1px solid #fff000;">Sample INformation</div>    
  </div>
 <div style="float:right; width:100px; height:320px; overflow:auto;">
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
  </div>
</div>


测试内容
样本信息
项目

项目

项目

项目

项目

项目

项目

项目

项目

项目


您可以使用框架或固定左柱的位置

.left
{
    position:fixed;
}

添加了“位置：固定”，以便在滚动时左div保持在原位