Как создать прокручиваемый элемент внутри перемещаемого элемента?

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; /* ? */ 
} 

Вы должны указать высоту для правой колонки, однако.

EDIT: Для того, чтобы ответить на ваш комментарий, легкий способ пойти об этом, если вы установите высоту вашего документа тела до 100%, как это:

body { 
    height: 100%; 
} 

Затем использовать собственный процент, чтобы установить высоту столбца на ваш вкус.

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