Question

我有一个模态，最大高度模态体。模态体具有overflow: auto，它会削减日期选择器。尝试关闭溢出，datepicker将以其完整尺寸显示，但同时body的内容将覆盖模态的页脚。

我想让模态体可滚动（就像在示例中一样），但我希望看到完整的日期选择器。

以下是问题的演示：

#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>

修改

datepicker是第三方库（https://eonasdan.github.io/bootstrap-datetimepicker/），它计算自己的位置（顶部，左侧等）我无法控制它。

以下是问题的更完整演示（使用实际的datetimepicker插件）：https://jsbin.com/sopevaxogu/7/edit?html,css,output

Answer 1

您可以将弹出式日期选择器设置为position: fixed;且不包含任何top，right，bottom，left值，如果他们已经从第三方设置，您可以使用!important将其重置为auto，然后根据需要使用margin来控制位置。

<强> jsBin

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

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

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

<强> jsBin

Answer 2

要显示完整的日期选择器并使#modal-body可滚动，请从datepicker中删除top: -30px;。这是一个演示http://codepen.io/anon/pen/ZLGJKb

可滚动元素中的绝对元素

2 个答案: