子元素绝对定位，无法出现滚动条，实现滚动

Posted 2023-05-05

<div id="pDiv" >
<div id="childDiv_1" style="position:absolute;top:800px;left:20px;;width:100px;height:200px;" >
</div>
<div id="childDiv_1" style="position:absolute;top:600px;left:20px;;width:100px;height:200px;" >
</div>
</div>

pDiv和浏览器body一样大，当子div 有多个的时候，不会自动出现滚动条；
子div采用绝对定位的原因是，每个子div 在父div中的位置是固定的，只知道绝对位置

参考技术A

可以出来滚动条

* 
margin: 0;
padding: 0;


html,
body 
height: 100%;


#pDiv 
min-height: 100%;

本回答被提问者和网友采纳

flex布局 滚动条失效

flex布局中，父元素：

parent:{
    display: flex;
}

子元素：

child:{
    flex: 1;
    overflow: auto;
}

子元素默认占满父元素；
子元素内容超过后，没有出现滚动条；

子元素：

child:{
    flex: 1;
    overflow: auto;
    width: 0;//横向需要滚动条的话
    height: 0;//纵向需要滚动条的话
}