仅滚动部分页面的 html 布局

Question

我想创建一个分为 3 部分的页面布局 - 一列宽度固定，包含两行固定高度。和另一列具有固定宽度，可能包含多个项目（超过适合视图）。

我正在寻找一种方法使页面滚动只影响项目列，以便屏幕左侧（第一列）保持可见。

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

Answer 1

申请overflow:auto右侧栏。查看以下示例 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>

示例演示