相对元素超出视口

Question

我在别人的代码工作，所以我唯一能改变的是CSS。对于html:

，我也有类似的设置

<div class="myElement">
...
<div class="menu">
<div class="menuList"></div>
</div>
...
</div>

• myElement:它是我不想超过的元素，它可以简单地作为视图端口。我不希望它是可滚动的
• 菜单:它的位置是绝对的
• 菜单列表:它的位置是相对的，它的最大高度是300px，但我想改变最大高度，以免超过它的上级

的目的是,我不想menuList超过300 px但是我也不想让它超过视窗或myElement。

我喜欢这样的解决方案:

.menuList{
max-height: calc(100% - (offset-top));
}

希望你有解决这个问题的办法!

Answer 1

这个例子模拟了

• 如果myElement短于menuList，则
• 如果menuList大于300px
• menu也处于绝对位置

将overflow设置为auto与高度限制一起测试，当内容使其变高时，它将使用滚动条。如果它较短，滚动条就会消失。menu也有相同的行为

.myElement {
position: relative;
height: 200px;
background: green;
overflow-y: scroll;
}
.myElement .menu {
position: absolute;
left: 10%;
top: 10%;
}
.myElement .menu .menuList {
max-height: 300px;
background: pink;
display: block;
position: relative;
overflow-y: auto;
margin-bottom: 2rem;
}

<div class="myElement">
<div class="menu">
<div class="menuList">
<ul>        
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>
<li>Sixteen</li>
<li>Seventeen</li>
</ul>
</div>
</div>
</div>