gpt4 book ai didi

html - 可滚动元素中的绝对元素

转载 作者:太空宇宙 更新时间:2023-11-04 02:02:25 26 4
gpt4 key购买 nike

我有一个模态,具有最大高度模态主体。模态主体有 overflow: auto,它切断了日期选择器。尝试关闭溢出,日期选择器将显示其完整尺寸,但同时正文内容将覆盖模态框的页脚。

我想让模态主体可滚动(就像在示例中一样),但我想看到完整的日期选择器。

下面是问题的演示:

#page {
background: #c4c4c4;
height: 100vh;
}
#modal {
background: #d4d4d4;
height: 60vh;
margin: 20px;
position: fixed;
}
#modal-body {
background: #4d4d4d;
height: 200px;
width: 200px;
position: relative;
overflow: auto;
}
#modal-header,
#modal-footer {
background: #5d5d5d;
}
#datepicker {
background: #a5a5a5;
position: absolute;
height: 100px;
width: 100px;
top: -30px;
}
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>

<body>
<div id="page">
<div id="modal">
<div id="modal-header">
HEADER
</div>
<div id="modal-body">
<div id="datepicker">datepicker</div>
<div>BODY BODY</div>
<div>BODY BODY</div>
<div>BODY BODY</div>
<div>BODY BODY</div>
<div>BODY BODY</div>
<div>BODY BODY</div>
<div>BODY BODY</div>
<div>BODY BODY</div>
<div>BODY BODY</div>
<div>BODY BODY</div>
<div>BODY BODY</div>
<div>BODY BODY</div>
<div>BODY BODY</div>
<div>BODY BODY</div>
</div>
<div id=modal-footer>
FOOTER
</div>
</div>
</div>

</body>

</html>

编辑

日期选择器是第 3 方库 ( https://eonasdan.github.io/bootstrap-datetimepicker/ ),它会计算自己的位置(顶部、左侧等)我无法控制它。

这是一个更完整的问题演示(使用实际的 datetimepicker 插件):https://jsbin.com/sopevaxogu/7/edit?html,css,output

最佳答案

您可以将弹出日期选择器设置为 position: fixed; 并且没有任何 top, right, bottom , left 值,如果它们已经从第 3 方设置,您可以使用 !important 将它们重置为 auto,然后使用 margin 根据需要控制仓位。

jsBin

还有另一种方法,如果您可以修改 HTML 以在 modal-body 中添加一个 div

<div id="modal-body">
<div id="modal-scroll">
...
</div>
</div>

#modal-body {
position: relative;
height: 30vh;
}
#modal-scroll {
overflow: auto;
height: 100%;
}

jsBin

关于html - 可滚动元素中的绝对元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41516374/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com