如何在HTML CSS中将滚动条添加到父div？
Subrato Patnaik
我想在父级div中添加垂直滚动条，因为在以下设置中，孩子的高度远大于父级div的高度。我在W3学校阅读过，默认情况下，overflow: auto;因此如果子div的高度超过父div的高度，它将添加滚动条。但是下面的设置并不能证明这一点。帮助我了解这一点。
根据W3学校CSS文档，
如果将高度设置为数值（如像素，（r）em，百分比），则如果内容不符合指定的高度，则会溢出。容器如何处理溢出内容由溢出属性定义。
我们如何证明上述说法合理？
.parentDiv {
background-color: coral;
height: 50px;
width: 200px;
}
.childDiv {
background-color: crimson;
height: 100px;
width: 200px;
}<div class="parentDiv">
<div class="childDiv">
</div>
</div> 鹰
确实有道理。您提供的CSS代码会呈现这样的页面
在这里，父母和孩子的宽度都相同，因此您将无法观察到溢出情况。对孩子的宽度进行些微更改，以便像这样可见父母
.parentDiv {
background-color: coral;
height: 50px;
width: 200px;
}
.childDiv {
background-color: crimson;
height: 100px;
width: 100px;
}
现在的输出将是
如我们所见，“粉红色元素”是高度属性值大于父级溢出对象的子级。
默认情况下，溢出值为visible。这样我们就可以看到元素溢出父对象。
因为孩子溢出了父母。我们必须overflow在父级上定义一个属性。
正如您从w3链接的文档所说，如果将overflow属性设置为auto，则在内容溢出时将添加一个滚动条。
这是一个演示相同的代码笔。
为了更好地理解，我更改了孩子的width和margin。
请让我知道，如果这证明该说法合理
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在Qt中将滚动条添加到网格布局？
- 2
如何在Qt中将滚动条添加到网格布局？
- 3
如何在Android中将滚动条添加到TextView
- 4
如何在Android中将滚动条添加到View Flipper
- 5
如何将滚动条添加到网格
- 6
如何将鼠标滚轮滚动添加到垂直滚动条或滚动区域？
- 7
是否可以将水平滚动条添加到html选择框？
- 8
如何将垂直滚动条添加到Bootstrap工具提示中显示的图像？
- 9
如何将垂直滚动条添加到gridview？
- 10
如何将滚动条按钮添加到默认的肉桂主题？
- 11
如何将滚动条添加到tinker-gui工具？
- 12
如何将滚动条添加到下拉菜单？
- 13
如何将蒙版渐变添加到水平滚动条
- 14
如何将滚动条按钮添加到默认的肉桂主题？
- 15
Tkinter-如何将滚动条添加到我的弹出窗口
- 16
如何将标准滚动条添加到SurfaceView？
- 17
如何将滚动条添加到富文本框 wpf
- 18
如何在div中添加滚动条
- 19
如何在DIV下方添加滚动条？
- 20
如何使用滚动条使列表适合父div
- 21
如何在sass中将：hover添加到父级？
- 22
如何编写用于将滚动条添加到SharePoint列表列中的单元格的JSON代码？
- 23
如果使用javascript或jquery的菜单较长，如何自动将滚动条添加到侧边栏菜单
- 24
如何将滚动条添加到包含一堆网格按钮的框架中？
- 25
如何在tkinter的框架中将滚动条附加到列表框？
- 26
CSS：如何使滚动条显示在div的边界之外？
- 27
如何在iOS中将内容添加到html文件
- 28
在flexdashboard中将滚动条添加到侧边栏
- 29
如何在Bootstrap中将padding添加到100％div？
我来说两句