Question

我对CSS var newpopup = L.popup({ closeOnClick: false }).setContent("I am a text that will stay open until closed"); marker.bindPopup(newpopup);

有一个问题

我已从codepen.io

创建了 DEMO

在此演示中，您可以看到左侧边栏。里面有11个overflow-y:scroll; div。但是如果你从左侧边栏向下滚动，那么你只能看到9层其他2层留在里面。

我的CSS有什么问题。我需要做些什么来修复它？

CSS

.layer

Answer 1

设置height: 100%将元素的高度设置为其父级的高度，如果div中包含另一个元素，则不会考虑该因素。你可以改变这个......

.left-list {
  position: relative;         
  width: 100%;
  height: 100%;
}

对此...

.left-list {
  position: absolute;
  top: 108px;
  bottom: 0;
}

这意味着它将从包含块的顶部开始108px（或者更确切地说是最接近的祖先非静态元素）并从包含块的底部开始。

（Demo）

Answer 2

像这样更改你的.left课程：

将overflow: auto更改为overflow: visible，将bottom: 0更改为bottom: 40%

实际上它应该变成：

.left{
display: block;
position: absolute;
float: left;
width: 30%;
overflow: visible;
padding: 0px;
bottom: 40%;
top: 0px;
left: 0px;
background-color: #FFF;
border-right: 1px solid #D8DBDF;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
transition: opacity 2s ease 0s, width 2s ease 0s, left 2s ease 0s, font-size 2s ease 0s, color 2s ease 0s;
}

CSS overflow-y：scroll;遗漏了什么

2 个答案: