1

我正在尝试显示一个页面,该页面具有两个可滚动的部分。我看到的是下部有一个滚动条,但它被截断了。当我将部分的高度属性从 90% 更改为 50% 时,会显示完整的滚动条。但是,如果我将浏览器调整为更小的尺寸,垂直滚动条会再次被截断。最上面的 div 的 CSS 应该有一个以像素为单位的高度。

.rootsection {
    background-color: yellow;
    padding: 5px;
    margin: 5px;
    overflow:hidden;
    width: 100%;
    height: 200px;   
}

可滚动 div 的 CSS 是:

.bottomSectionScrollable{
    background-color: green;    
    overflow:auto !important;
    padding: 5px;
    margin: 5px;
    height: 90%;    
}

当高度更改为 50% 并且根段高度未更改为 200px 时,我看到滚动条没有被截断。我希望可滚动部分应该始终有一个永远不会被截断的垂直滚动条,并且不应该留下空白。即使重新调整浏览器大小或对用户执行缩放/取消缩放操作,也应该是这种情况。我通过更改根部分的高度来模拟调整大小的操作。

小提琴

关于如何确保可滚动部分的滚动条始终可见并且即使在调整浏览器大小时也始终占据父框的全部空间的任何想法?

4

0 回答 0