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

Stack Overflow用户

提问于 2018-07-25 01:59:11

回答 3查看 47关注 0票数 0

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

这里说明了问题(没有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%可滚动，对我来说不起作用。

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-08-02 21:44:08

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

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

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>

票数 0

Stack Overflow用户

发布于 2018-07-25 02:14:02

拥有可滚动的#son，但需要额外的div。这行得通吗？

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: top;
     overflow-y: scroll;
}
 #container {
     width: 200px;
     background: #FFF;
     margin: 0 auto;
     height: 0;
}
 #sub-container {
     background-color: #fff;
}

<html>
<body>
  <div id="grandfather">
    <div id="father">
      <div id="son">
        <div id="container">
          <div id="sub-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>
  </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>

票数 1

Stack Overflow用户

发布于 2018-07-25 02:17:13

Honestly...Id让一切变得灵活起来。

I mean...why not？

So...first关闭，你将不得不屈从父子。然后，您必须选择您的对齐方式(我在示例中选择了居中)。然后，您将需要设置儿子的最大高度。否则它将永远延续下去。它可以是像素量或vh(视口高度百分比)或其他值。

设置了max-height的版本：

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

我希望这能帮到你。老实说，桌子很烂。除非你迫不得已，否则我会远离桌子的展示。

-编辑--

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51504932

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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