只有部分页面滚动的html布局

Question

我想创建一个分为 3 部分的页面布局 - 一列固定宽度，其中包含两行固定高度。和另一列具有固定宽度，可能包含多个元素(超过 View )。

我正在寻找一种方法让页面滚动只影响元素列，以便屏幕左侧(第一列)保持在 View 中。

这是布局的示例图片，可以更好地说明含义:

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>

SAMPLE DEMO