我们有一个带有 position: fixed
和 overflow-y: auto
的模态。
当我们有很多组件从显示滚动条开始溢出时,这很有效。
但是,当我们在打开弹出/下拉日历的模式中有一个自定义日历字段并且该元素位于容器一侧的外部时,它不会显示。
有没有办法在保持模态的 overflow-y: auto
的同时显示弹出/下拉菜单?像这样:
Codepen 详述:http://codepen.io/anon/pen/jWmNMa
.modal {
position: fixed;
background-color: pink;
height: 200px;
width: 200px;
left: 30%;
/* comment out this to show dropdown*/
overflow: auto;
}
.dropdown {
background-color: lime;
height: 80px;
width: 80px;
position: absolute;
left: -50px;
}
html:
<div class="modal">
<div class="dropdown">
This is content in a dropdown.
</div>
Long long overflowing text...
</div>
最佳答案
在您的情况下,绝对 定位的子元素不可能出现在父元素之外 .modal
有 overflow: auto
时的元素在其上设置(除非您将 position
元素的 .dropdown
设置为 fixed
)。
最简单的解决方法是将文本和其他内容换行,然后设置 overflow: auto
在那个元素上。例如,您可以用 .content
包装它元素,然后设置 height: 100%
和 overflow: auto
为了添加滚动条并隐藏那些特定元素的溢出。
<div class="modal">
<div class="dropdown">
This is content in a dropdown.
</div>
<div class="content">...</div>
</div>
.modal {
position: fixed;
background-color: pink;
height: 200px;
width: 200px;
left: 30%;
}
.modal .content {
height: 100%;
overflow: auto;
}
关于css - 容器内绝对定位元素溢出 : auto,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34658478/