只有部分頁面滾動的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> 

SAMPLE DEMO

Answer 2

爲什麼不浮動你的物品的容器吧，然後有一個左邊欄是位置：固定的嗎？

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

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

Answer 3

可以使用幀或修復左列的位置。

.left 
{ 
    position:fixed; 
}