Reputation: 3615

How to make popup in a fixed overlay container scrollable?

I am trying to create a popup dialog, using table as the wrapper for easy vertical aligning. Problem is, that if the popup itself is longer then the viewport, then it needs to be scrollable, but isn't.

Problem illustrated here (without JS, which is irrelevant to this question): 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>

My target is to make the #son div scrollable, not the #container. The Container has longer height sometimes, but not always. So making it 100% and scrollable, doesn't work for me.

Upvotes: 0

Answers (3)

Kalle H. Väravas

Reputation: 3615

To answer my question few years later, I ended up using max-height: 100vh;. This works perfectly for responsive design. In scale-up to desktop mode, you simply override these values.

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>

Upvotes: 0

user1816910

Reputation:

Honestly...Id flex it all.

I mean...why not?

So...first off, you will have to flex the father and son. Then, you will have to choose your alignment(I chose center in my example). Then, you will need to set a max height on the son. Otherwise itll stretch on forever. It can be a pixel-amount or a vh(viewport height percentage) or whatevs.

Version with set 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/

version with a more dynamic set height:

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

I hope this helps. Honestly, tables suck. Id stay away from the display of tables unless you have to.

-- Edit --

An updated version, per comment request, to fix the container height to its parent.

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

Upvotes: 1

Chaska

Reputation: 3205

Having #son scrollable, but need an extra div. Does this work?

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>

Upvotes: 1

How to make popup in a fixed overlay container scrollable?

Answers (3)

Related Questions