div元素长宽固定,分3列填充子元素div,当内容溢出时采取竖直滚动,如何实现
时间: 2024-01-29 19:04:13 浏览: 70
html中设置让div中的内容超出后自动显示滚动条
你可以给父元素设置 `overflow: auto` 属性,这样当子元素的高度超过父元素时,会自动生成滚动条。具体实现可以参考如下代码:
HTML:
```
<div class="wrapper">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
```
CSS:
```
.wrapper {
width: 600px;
height: 300px;
overflow: auto;
display: flex;
}
.column {
width: 200px;
height: 100%;
overflow-y: auto;
}
```
在上面的代码中,我们使用了 `flex` 布局来实现 3 列布局,每一列使用 `.column` 类来表示,并设置了固定的宽度为 200px。父元素 `.wrapper` 设置了固定的宽度和高度,并且使用了 `overflow: auto` 属性来自动生成滚动条。每一列 `.column` 设置了 `overflow-y: auto` 属性来实现竖直方向的滚动条。当子元素内容超过高度时,会自动显示滚动条。
阅读全文