Question

我正在尝试创建一个弹出对话框，使用表格作为包装器以方便垂直对齐。问题是，如果弹出窗口本身的长度大于视口的长度，则它需要可滚动，但不能滚动。

此处说明的问题（没有JS，与该问题无关）： https://jsfiddle.net/ugt1k8am/

<html>
<head>
    <style>
        html, body {overflow: hidden;}

        #grandfather {display: table; width: 100%; position: fixed; top: 0; right: 0; left: 0; height: 100%; background: rgba(0, 0, 0, 0.5);}
          #father {display: table-row;}
            #son {display: table-cell; vertical-align: middle; overflow-y: scroll;}

              #container {width: 200px; background: #FFF; margin: 0 auto;}
    </style>
</head>
<body>
  <div id="grandfather">
    <div id="father">
      <div id="son">
        <div id="container">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam libero orci, bibendum vel ultricies in, venenatis iaculis lectus. Sed ut cursus mi, ac bibendum ipsum. Suspendisse ut eros vestibulum, volutpat arcu ac, vulputate tortor. Ut non interdum nunc. Donec vitae suscipit felis. Duis ultrices egestas tristique. Aliquam at nulla et risus mollis iaculis vel sed tellus. Duis et ligula semper tortor interdum consequat. Cras sit amet dolor consequat, facilisis ligula quis, semper tortor. Integer semper augue quis eleifend tristique.<br>
          <br>
          Nulla sit amet semper purus, et luctus quam. Maecenas at massa ac diam iaculis fringilla at mattis felis. Duis vitae arcu quis dolor volutpat interdum. Vivamus non lorem tellus. Morbi non euismod lorem. Nullam at risus magna. Phasellus tincidunt ipsum vitae orci porta blandit. Etiam cursus interdum tellus vel suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sit amet aliquet lacus, ut facilisis lorem.
        </div>
      </div>
    </div>
  </div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam libero orci, bibendum vel ultricies in, venenatis iaculis lectus. Sed ut cursus mi, ac bibendum ipsum. Suspendisse ut eros vestibulum, volutpat arcu ac, vulputate tortor. Ut non interdum nunc. Donec vitae suscipit felis. Duis ultrices egestas tristique. Aliquam at nulla et risus mollis iaculis vel sed tellus. Duis et ligula semper tortor interdum consequat. Cras sit amet dolor consequat, facilisis ligula quis, semper tortor. Integer semper augue quis eleifend tristique.<br>
  <br>
  Nulla sit amet semper purus, et luctus quam. Maecenas at massa ac diam iaculis fringilla at mattis felis. Duis vitae arcu quis dolor volutpat interdum. Vivamus non lorem tellus. Morbi non euismod lorem. Nullam at risus magna. Phasellus tincidunt ipsum vitae orci porta blandit. Etiam cursus interdum tellus vel suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sit amet aliquet lacus, ut facilisis lorem.<br>
  <br>
  In quam ligula, auctor rhoncus tortor vel, fringilla volutpat elit. Sed porta mauris ac magna iaculis, tempor consectetur urna interdum. Integer in turpis rutrum, efficitur diam eu, vulputate risus. Curabitur porttitor quam in nisi tincidunt, vitae vulputate est venenatis. Integer at neque vel erat volutpat bibendum a vel justo. Donec vulputate sagittis lobortis. Nullam at tristique risus, nec pellentesque odio. Nunc ut sapien non quam congue mattis non sed mauris. Quisque malesuada diam sit amet mi auctor, ac dapibus leo luctus. Phasellus et venenatis arcu. Ut rutrum id felis quis egestas. Praesent ante turpis, posuere interdum dui vel, imperdiet aliquam magna. In luctus quis tortor et venenatis. Fusce convallis urna eget tellus interdum, et placerat enim sodales. Ut dapibus elit nulla, sed pellentesque massa tristique non.

  Mauris blandit volutpat neque vel ornare. Quisque quam justo, posuere vel nunc nec, lacinia eleifend justo. Vestibulum at maximus augue, tempor tempus tortor. Phasellus fermentum neque est, nec dictum risus consectetur nec. Integer ultrices feugiat efficitur. Vestibulum non ultricies dolor, vel bibendum ligula. Maecenas malesuada purus vel ligula lobortis, vel elementum odio lacinia.<br>
  <br>
  Nulla id ante venenatis, sagittis urna id, tristique nulla. Integer vel erat gravida, gravida quam at, mattis nibh. Integer rhoncus eu ex id semper. Pellentesque ligula risus, accumsan non feugiat at, pellentesque vel purus. Sed eu iaculis arcu. In egestas nisl id nisi faucibus gravida. Suspendisse interdum rhoncus risus, ac vehicula nibh vestibulum condimentum. Pellentesque bibendum viverra gravida. Cras eu mattis odio, a posuere nibh. Sed in tortor magna. Pellentesque blandit diam vel tempor lacinia. Donec condimentum varius eleifend. Aenean consectetur massa et turpis pretium suscipit. In a arcu scelerisque, pharetra magna id, malesuada turpis. Nunc mi tortor, porta vitae malesuada sed, gravida a ex. Donec ultrices purus ut ipsum placerat consequat.
</body>
</html>

我的目标是使#son div可滚动，而不是#container。容器有时（但并非总是）具有更高的高度。因此，使其变为100％可滚动状态对我不起作用。

Answer 1

可以滚动ComboBoxes，但需要额外的div。这行得通吗？

<script src="js/myfile.js" type="text/javascript"></script>

#son

Answer 2

老实说...我想尽一切办法。

我的意思是...为什么不呢？

所以...首先，您将不得不弯曲父亲和儿子。然后，您将必须选择对齐方式（我在示例中选择了居中）。然后，您将需要在儿子上设置最大高度。否则，它将永远持续下去。它可以是像素量或vh（视口高度百分比）或其他。

设置了最大高度的版本：

  #father {height: 100%; display: flex; align-items: center; justify-content: center;}
  #son {display: inline-flex; max-height: 400px; overflow-y: scroll;}

https://jsfiddle.net/ugt1k8am/8/

具有更高动态设置高度的版本：

  #father {height: 100vh; display: flex; align-items: center; justify-content: center;}
  #son {display: inline-flex; max-height: 80%; overflow-y: scroll;}

https://jsfiddle.net/ugt1k8am/14/

我希望这会有所帮助。老实说，桌子很烂。除非有必要，否则ID请勿显示在表格中。

-编辑-

每个注释请求的更新版本，用于将容器的高度固定为其父容器的高度。

https://jsfiddle.net/ugt1k8am/23/

Answer 3

几年后，为了回答我的问题，我最终使用了max-height: 100vh;。这非常适合响应式设计。在向上扩展到桌面模式时，您只需覆盖这些值即可。

Jsfiddle： https://jsfiddle.net/5wgk12Lt/

html, body {overflow: hidden;}

#grandfather {display: table; width: 100%; position: fixed; top: 0; right: 0; left: 0; height: 100%; background: rgba(0, 0, 0, 0.5);}
  #father {display: table-row;}
    #son {display: table-cell; vertical-align: middle;}
    
      #container {width: 200px; background: #FFF; margin: 0 auto; max-height: 100vh; overflow-y: scroll;}

<html>
<body>
  <div id="grandfather">
    <div id="father">
      <div id="son">
        <div id="container">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam libero orci, bibendum vel ultricies in, venenatis iaculis lectus. Sed ut cursus mi, ac bibendum ipsum. Suspendisse ut eros vestibulum, volutpat arcu ac, vulputate tortor. Ut non interdum nunc. Donec vitae suscipit felis. Duis ultrices egestas tristique. Aliquam at nulla et risus mollis iaculis vel sed tellus. Duis et ligula semper tortor interdum consequat. Cras sit amet dolor consequat, facilisis ligula quis, semper tortor. Integer semper augue quis eleifend tristique.<br>
          <br>
          Nulla sit amet semper purus, et luctus quam. Maecenas at massa ac diam iaculis fringilla at mattis felis. Duis vitae arcu quis dolor volutpat interdum. Vivamus non lorem tellus. Morbi non euismod lorem. Nullam at risus magna. Phasellus tincidunt ipsum vitae orci porta blandit. Etiam cursus interdum tellus vel suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sit amet aliquet lacus, ut facilisis lorem.
        </div>
      </div>
    </div>
  </div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam libero orci, bibendum vel ultricies in, venenatis iaculis lectus. Sed ut cursus mi, ac bibendum ipsum. Suspendisse ut eros vestibulum, volutpat arcu ac, vulputate tortor. Ut non interdum nunc. Donec vitae suscipit felis. Duis ultrices egestas tristique. Aliquam at nulla et risus mollis iaculis vel sed tellus. Duis et ligula semper tortor interdum consequat. Cras sit amet dolor consequat, facilisis ligula quis, semper tortor. Integer semper augue quis eleifend tristique.<br>
  <br>
  Nulla sit amet semper purus, et luctus quam. Maecenas at massa ac diam iaculis fringilla at mattis felis. Duis vitae arcu quis dolor volutpat interdum. Vivamus non lorem tellus. Morbi non euismod lorem. Nullam at risus magna. Phasellus tincidunt ipsum vitae orci porta blandit. Etiam cursus interdum tellus vel suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sit amet aliquet lacus, ut facilisis lorem.<br>
  <br>
  In quam ligula, auctor rhoncus tortor vel, fringilla volutpat elit. Sed porta mauris ac magna iaculis, tempor consectetur urna interdum. Integer in turpis rutrum, efficitur diam eu, vulputate risus. Curabitur porttitor quam in nisi tincidunt, vitae vulputate est venenatis. Integer at neque vel erat volutpat bibendum a vel justo. Donec vulputate sagittis lobortis. Nullam at tristique risus, nec pellentesque odio. Nunc ut sapien non quam congue mattis non sed mauris. Quisque malesuada diam sit amet mi auctor, ac dapibus leo luctus. Phasellus et venenatis arcu. Ut rutrum id felis quis egestas. Praesent ante turpis, posuere interdum dui vel, imperdiet aliquam magna. In luctus quis tortor et venenatis. Fusce convallis urna eget tellus interdum, et placerat enim sodales. Ut dapibus elit nulla, sed pellentesque massa tristique non.

  Mauris blandit volutpat neque vel ornare. Quisque quam justo, posuere vel nunc nec, lacinia eleifend justo. Vestibulum at maximus augue, tempor tempus tortor. Phasellus fermentum neque est, nec dictum risus consectetur nec. Integer ultrices feugiat efficitur. Vestibulum non ultricies dolor, vel bibendum ligula. Maecenas malesuada purus vel ligula lobortis, vel elementum odio lacinia.<br>
  <br>
  Nulla id ante venenatis, sagittis urna id, tristique nulla. Integer vel erat gravida, gravida quam at, mattis nibh. Integer rhoncus eu ex id semper. Pellentesque ligula risus, accumsan non feugiat at, pellentesque vel purus. Sed eu iaculis arcu. In egestas nisl id nisi faucibus gravida. Suspendisse interdum rhoncus risus, ac vehicula nibh vestibulum condimentum. Pellentesque bibendum viverra gravida. Cras eu mattis odio, a posuere nibh. Sed in tortor magna. Pellentesque blandit diam vel tempor lacinia. Donec condimentum varius eleifend. Aenean consectetur massa et turpis pretium suscipit. In a arcu scelerisque, pharetra magna id, malesuada turpis. Nunc mi tortor, porta vitae malesuada sed, gravida a ex. Donec ultrices purus ut ipsum placerat consequat.
</body>
</html>

如何使固定覆盖容器中的弹出窗口可滚动？

3 个答案: