CODEWITHSUNDEEP
vertical-alignmentcss
easoncxz
easoncxz

Reputation: 261

How to fill the screen with a div, then center it once the screen gets too big (max-height reached)?

Goal:

The example below has achieved everything, except for the last point.

How to center this div vertically in the window? I.e., I want the red areas to behave like the green ones, but just vertically instead of horizontally.

(This design is intended for a responsive design for mobile devices' screens. No JS involvement if possible.)

<!doctype html>
<html>
        <head>
                <style>
                        body,html{
                                height:100%;
                                margin:0px;
                                background:green;
                                }
                        #t1{
                                position:relative;
                                height:100%;
                                max-width:640px;
                                margin:0 auto;
                                background-color:red;
                        }
                        #t1-1{
                                position:absolute;
                                height:100%;
                                max-height:640px;
                                width:100%;
                                background-color:#dddddd;

                                overflow:hidden;/*demo purpose*/
                        }
                        /*the following stuff are for demo only*/
                        img{
                                position:absolute;
                                opacity:0.5;
                        }
                        img.w{
                                width:100%;
                        }
                        img.h{
                                height:100%;
                        }
                </style>
        </head>
        <body>
                <div id="t1">
                        <div id="t1-1">
                                <img class="h" src="http://www.google.com/images/srpr/logo3w.png" />
                                <img class="w" src="http://www.google.com/images/srpr/logo3w.png" />
                        </div>
                </div>
        </body>
</html>

P.S. In this example, some desktop browsers internally set a min-width value to the whole thing (e.g. 400px in Chrome), unabling the div to keep shrinking horizontally.

Upvotes: 0

Views: 217

Answers (3)

Olaf Dietsche
Olaf Dietsche

Reputation: 74078

You can add a @media query to achieve this effect 

@media (min-height: 640px) {
    #t1-1 {
        top: 50%;
        margin-top: -320px;
    }
}

See JSFiddle for testing.

Upvotes: 0

otakustay
otakustay

Reputation: 12405

You may need a little javascript to make it work:

First of all, you need an <div> element to layout, so I called it mask:

<div id="mask"></div>

Then, style it to fill the entire document, and give a max-width and max-height:

<style>
    #mask {
        position: fixed;
        height: 100%;
        max-height: 400px;
        width: 100%;
        max-width: 400px;
        top: 0;
        left: 0;
        background: red;
    }
</style>

This style do not perform the centering work, so you need your javascript to do it, we have a layoutMask function to determine if the div should be centered or not:

var mask = document.getElementById('mask');
function layoutMask() {
    // here 400 is the same as the max-width style property
    if (window.innerWidth >= 400) {
        mask.style.left = '50%';
        // to ensure centering, this sould be (max-width / 2)
        mask.style.marginLeft = '-200px';
    }
    else {
        mask.style.left = '';
        mask.style.marginLeft = '';
    }

    // the same as width
    if (window.innerHeight >= 400) {
        mask.style.top = '50%';
        mask.style.marginTop = '-200px';
    }
    else {
        mask.style.top = '';
        mask.style.marginTop = '';
    }
}

At last, assign this function to the resize event, and execute immediately to ensure the <div> got layed correctly on first load:

if (window.addEventListener) {
    window.addEventListener('resize', layoutMask);
}
else {
    window.attachEvent('onresize', layoutMask);
}
layoutMask();

I tried this on my chrome, but I'm sure it does not work under IE6 since IE6 doesn't support the position: fixed; style, but it should work in most browsers.

I've made a jsfiddle for test.

Upvotes: 1

Saswata Sundar
Saswata Sundar

Reputation: 586

As per my knowledge, with height:100% it is not possible. You need to use <center> to keep it in center horizontally and vertically. You may need to use margins also. Like:

margin-top:18%;
margin-left:40%;

Upvotes: 0

Related Questions