我想创建一个页面布局,分为3个部分 - 一个具有固定宽度的列,其中包含两行固定高度。另一列具有固定宽度,可以容纳多个项目(超出视图范围)。
我正在寻找一种方法,使页面滚动仅影响项目列,以便屏幕左侧(第一列)保持在视图中。
以下是布局示意图,以更好地说明意思:
我正在寻找一种方法,使页面滚动仅影响项目列,以便屏幕左侧(第一列)保持在视图中。
以下是布局示意图,以更好地说明意思:
为你的右侧列应用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>
.left
{
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>