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

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

1 个答案: