如何在浮動元素中創建可滾動元素？

Question

我想創建一個包含div的右浮動列的雙列布局，一旦其內容溢出瀏覽器窗口高度，就會變爲可滾動列。

這是HTML代碼，我的工作：

<div class=container> 
<div class=column_A>A</div> 
<div class=column_B>B 
    <div class=content>C<br><br><br><br><br><br><br><br><br> 
    <br><br><br><br><br><br><br><br><br><br><br><br><br> 
    <br><br><br><br><br><br><br><br><br><br>C 
    </div>B 
</div> 
</div> 

這是CSS代碼：

.column_A { 
float: left; 
border: black solid 2px; 
height: 500px; 
width: 65%; 
background: red; 
} 

.column_B { 
float: right; 
border: black solid 2px; 
width: 30%; 
background: blue; 
} 

.content { 
border: white solid 3px; 
overflow: auto; 
background: green; 
} 

滾動目前在瀏覽器窗口，如何我是否將其轉移到內容？

Answer 1

您使用overflow: auto這樣的：

.column_B { 
    float: right; 
    border: black solid 2px; 
    width: 30%; 
    background: blue; 
    overflow: auto; 
    height: 600px; /* ? */ 
} 

您需要指定您的右列的高度，雖然。

編輯：爲了回答您的評論，最簡單的方式去了解它，如果你設置你的文檔主體的高度爲100％，這樣的：

body { 
    height: 100%; 
} 

然後使用自定義的百分比來設置列的高度根據你的喜好。

.column_B { 
    ... 
    height: 99%; /* or whatever you need */ 
    ... 
}