只滚动页面的一部分，如何实现 HTML 布局？

Question

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

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

以下是布局示意图，以更好地说明意思：

- avivr

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>

示例演示

- Suresh Ponnukalai

---

添加了 'position:fixed'，这样左侧的div在滚动时将保持在原位。 - avivr

Answer 2

你可以使用框架或固定左侧列的位置。

.left
{
    position:fixed;
}

- Touseef Rehman

Answer 3

为什么不将项目容器向右浮动，然后有一个左侧列是 position:fixed？

 .left { position:fixed;width:70% }
 .right { float:right;width:30%; }

 <div>
  <div class="left">
   This content is fixed and does not scroll
  </div>
  <div class="right">
   <ul>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
    <li>item></li>
   </ul>
  </div>
 </div>

- twsaef