仅页面滚动部分的html布局 [英] html layout with only part of the page scrolling

问题描述

我想创建一个分为3部分的页面布局-固定宽度的一列包含固定高度的两行.以及另一列固定宽度的列，该列可能包含多个项目(超出了视图的容纳范围).

I want to create an page layout that is split into 3 parts - one column with fixed width that contain two rows with fixed height. and another column with fixed width, that can potentially contain multiple items (more than fit into view).

我正在寻找一种使页面滚动仅影响item列的方法，以便屏幕的左侧(第一列)保留在视图中.

I'm looking for a way to make the page scrolling only affect the items column, so that the left side of the screen (first column) remains on view.

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

Here is a sample image of the layout to better illustrate the meaning:

推荐答案

在右侧列中应用 overflow:auto .查看以下示例HTML.

Apply overflow:autofor your right side columns. Look at the following sample 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>

样本演示

这篇关于仅页面滚动部分的html布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！