如何在浮动元素中创建可滚动元素？

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 */ 
    ... 
}