Center Div Vertically - Max-Height 100% not working

Question

AycheKay 0 Light Poster

10 Years Ago

I'm trying to center a popup vertically of unknown height. I'd really like to make it so I have a 10% margin on top and bottom and that the div displays a scrollbar if the content fills up more than 80% of the leftover available space.

Here's what I have so far. The height max-height: 100% in .popup class isn't working. My popup height displays as about 40 pixels, roughly what it takes to make the buttons for the scrollbar.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
        <title>Centered Vert.</title>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <style>
            html {font-family: Verdana, Geneva, sans-serif;color: #B0B0B0;}
            body {background-color: #191919;}
            #overlaylight {
                background-color:rgba(212,212,212,0.5);
                position:absolute;
                top:0; left:0;
                width:100%;
                height:100%;
                z-index:15;
                display: none;
            }
            .popupWrapper {
                display: table-cell;
                vertical-align: middle;
            }
            .popup {
                padding: 10px 20px 20px 20px;
                margin-left:auto;
                margin-right: auto;
                background-color:#191919;
                overflow-y: auto;
                max-height: 100%; /* <-- Doesn't work */
            }
            #centeredPopup {
                width: 480px;
            }

      </style>
      <script>
        function openPopup() {
            $('#overlaylight').css("display", "table");
        }
      </script>
    </head>
    <body>
        <button type="button" onClick="openPopup();">Open Popup</button>

        <div id="overlaylight">
            <div class="popupWrapper">
                <div id="centeredPopup" class="popup">
                    <h3>Centered Popup</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis dui non enim accumsan viverra. Mauris gravida sagittis orci, convallis varius nisi ullamcorper ut. Maecenas gravida facilisis ipsum ac viverra. Etiam pellentesque dignissim mauris, et dapibus ante ullamcorper sed. Curabitur facilisis felis at mattis consectetur. Aenean varius erat a ante suscipit, id auctor turpis tincidunt. Curabitur consectetur accumsan aliquam. Vestibulum bibendum ligula et purus ornare, vel gravida velit sagittis. Suspendisse vehicula orci libero, id auctor turpis suscipit vitae.</p>

                    <p>Praesent dolor sem, commodo nec lorem ut, ullamcorper luctus velit. Vivamus viverra congue sapien, id pellentesque dolor. Ut iaculis, libero a adipiscing commodo, dui eros faucibus libero, eget ullamcorper quam dui luctus turpis. Morbi non metus vel erat tempor adipiscing. Donec semper sem ut velit malesuada porta. Integer dui risus, sollicitudin vitae enim sed, ornare pharetra diam. Mauris sed metus hendrerit, commodo dui nec, suscipit orci. Pellentesque eleifend luctus dignissim. Fusce pharetra diam vel tellus vestibulum, et congue metus dignissim. Aliquam erat volutpat. Cras pretium libero metus, sed lacinia neque hendrerit quis. Nam sapien nulla, dictum in sem non, euismod vehicula leo. Nam vel ante dui. Etiam facilisis rutrum velit eu placerat. Donec a nulla vel leo viverra pellentesque.</p>

                    <p>Fusce quis orci semper, sollicitudin est et, auctor nulla. Aliquam eget nisl porta, pellentesque nibh sit amet, auctor lacus. Vestibulum vehicula nisi id diam adipiscing, vitae laoreet nisl pharetra. Nam venenatis diam ut sapien viverra dapibus. Integer id commodo diam. Sed id justo ac sapien dapibus tempus. Phasellus eget lacus lectus. Suspendisse interdum eleifend metus, sit amet congue mauris tincidunt sit amet.</p>
                </div>
            </div>
        </div>

    </body>

</html>

web-design

5 Contributors
5 Replies
296 Views
5 Days Discussion Span
Latest Post 10 Years Ago Latest Post by diafol

jstfsklh211 79 Light Poster

10 Years Ago

max-height just sets a limit on how high the element can get
you dont have a specification for actual hight or min-height

if you always want that margin to display your max-height should be 100% - margin

rtrethewey 24 Junior Poster

10 Years Ago

This should be close:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Centered Vert.</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <style>
    html {font-family: Verdana, Geneva, sans-serif;color: #B0B0B0;}
    body {background-color: #191919;}
    html,body { margin:0; padding:0; width:100%; height:100%; }
    #overlaylight {
    background-color:rgba(212,212,212,0.5);
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    z-index:15;
    display: none;
    }
    .popupWrapper {
    position:relative; z-index:inherit;
    margin:0;
    padding:0;
    width:100%; height:100%;
    }
    .popup {
    position:relative; z-index:inherit;
    padding: 1% 20px 1% 20px;
    margin:5% auto;
    background-color:#191919;
    overflow-y: auto;
    height:78%;
    }
    #centeredPopup { width: 480px; }
    </style>
    <script>
    function openPopup() {
    $('#overlaylight').css("display", "block");
    }
    </script>
    </head>
    <body>
    <button type="button" onClick="openPopup();">Open Popup</button>
    <div id="overlaylight">
    <div class="popupWrapper">
    <div id="centeredPopup" class="popup">
    <h3>Centered Popup</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis dui non enim accumsan viverra. Mauris gravida sagittis orci, convallis varius nisi ullamcorper ut. Maecenas gravida facilisis ipsum ac viverra. Etiam pellentesque dignissim mauris, et dapibus ante ullamcorper sed. Curabitur facilisis felis at mattis consectetur. Aenean varius erat a ante suscipit, id auctor turpis tincidunt. Curabitur consectetur accumsan aliquam. Vestibulum bibendum ligula et purus ornare, vel gravida velit sagittis. Suspendisse vehicula orci libero, id auctor turpis suscipit vitae.</p>
    <p>Praesent dolor sem, commodo nec lorem ut, ullamcorper luctus velit. Vivamus viverra congue sapien, id pellentesque dolor. Ut iaculis, libero a adipiscing commodo, dui eros faucibus libero, eget ullamcorper quam dui luctus turpis. Morbi non metus vel erat tempor adipiscing. Donec semper sem ut velit malesuada porta. Integer dui risus, sollicitudin vitae enim sed, ornare pharetra diam. Mauris sed metus hendrerit, commodo dui nec, suscipit orci. Pellentesque eleifend luctus dignissim. Fusce pharetra diam vel tellus vestibulum, et congue metus dignissim. Aliquam erat volutpat. Cras pretium libero metus, sed lacinia neque hendrerit quis. Nam sapien nulla, dictum in sem non, euismod vehicula leo. Nam vel ante dui. Etiam facilisis rutrum velit eu placerat. Donec a nulla vel leo viverra pellentesque.</p>
    <p>Fusce quis orci semper, sollicitudin est et, auctor nulla. Aliquam eget nisl porta, pellentesque nibh sit amet, auctor lacus. Vestibulum vehicula nisi id diam adipiscing, vitae laoreet nisl pharetra. Nam venenatis diam ut sapien viverra dapibus. Integer id commodo diam. Sed id justo ac sapien dapibus tempus. Phasellus eget lacus lectus. Suspendisse interdum eleifend metus, sit amet congue mauris tincidunt sit amet.</p>
    </div>
    </div>
    </div>
    </body>
    </html>

The main problem was using 'display:table', which means the height of the container expands dynamically to fit the content.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

AycheKay 0 Light Poster · Answer 1 · 2014-05-13T00:29:34+00:00

rtrethewey, I was using the example I found at SO which depends on display:table.
http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css

I haven't tried your solution yet but I may if I can't get the one I'm using now to work satisfactorily.

jstfsklh211, I used your solution and it worked. I'm having different issues now, which I may post about separately if needed.

samertaha 0 Newbie Poster · Answer 2 · 2014-05-17T21:28:34+00:00

try this solution please ...

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
        <title>Centered Vert.</title>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <style>
            html {font-family: Verdana, Geneva, sans-serif;color: #B0B0B0;}
            body {background-color: #191919;}
            .mainpage{
                width:100%;
                max-width:940px;
                height:840px;
                margin : 0 auto;
                background-color:rgba(212,212,212,0.5);
                position: relative;
            }
            #overlaylight {         
                display: none;
                position: absolute;
                height: 100%;
                width: 100%;                
            }
            .popupWrapper { 
                display: table-cell;
                vertical-align: middle;
            }

            .inner{
                margin-left: auto;
                margin-right: auto; 
                overflow-y : auto;
                width: 480px;
                height: 400px;
            }  

      </style>
      <script>
        function openPopup() {
            $('#overlaylight').css("display", "table");
        }
      </script>
    </head>
    <body>

     <div class="mainpage">  
        <button type="button" onClick="openPopup();">Open Popup</button>
        <div id="overlaylight">
            <div class="popupWrapper">  
                <div class="inner">          
                    <h3>Centered Popup</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis dui non enim accumsan viverra. Mauris gravida sagittis orci, convallis varius nisi ullamcorper ut. Maecenas gravida facilisis ipsum ac viverra. Etiam pellentesque dignissim mauris, et dapibus ante ullamcorper sed. Curabitur facilisis felis at mattis consectetur. Aenean varius erat a ante suscipit, id auctor turpis tincidunt. Curabitur consectetur accumsan aliquam. Vestibulum bibendum ligula et purus ornare, vel gravida velit sagittis. Suspendisse vehicula orci libero, id auctor turpis suscipit vitae.</p>
                    <p>Praesent dolor sem, commodo nec lorem ut, ullamcorper luctus velit. Vivamus viverra congue sapien, id pellentesque dolor. Ut iaculis, libero a adipiscing commodo, dui eros faucibus libero, eget ullamcorper quam dui luctus turpis. Morbi non metus vel erat tempor adipiscing. Donec semper sem ut velit malesuada porta. Integer dui risus, sollicitudin vitae enim sed, ornare pharetra diam. Mauris sed metus hendrerit, commodo dui nec, suscipit orci. Pellentesque eleifend luctus dignissim. Fusce pharetra diam vel tellus vestibulum, et congue metus dignissim. Aliquam erat volutpat. Cras pretium libero metus, sed lacinia neque hendrerit quis. Nam sapien nulla, dictum in sem non, euismod vehicula leo. Nam vel ante dui. Etiam facilisis rutrum velit eu placerat. Donec a nulla vel leo viverra pellentesque.</p>
                    <p>Fusce quis orci semper, sollicitudin est et, auctor nulla. Aliquam eget nisl porta, pellentesque nibh sit amet, auctor lacus. Vestibulum vehicula nisi id diam adipiscing, vitae laoreet nisl pharetra. Nam venenatis diam ut sapien viverra dapibus. Integer id commodo diam. Sed id justo ac sapien dapibus tempus. Phasellus eget lacus lectus. Suspendisse interdum eleifend metus, sit amet congue mauris tincidunt sit amet.</p>        
                </div>   
            </div>
        </div>
    </div>   
    </body>
</html>

diafol · Answer 3 · 2014-05-17T23:12:40+00:00

Have a look at CSS3 flexbox.