CODEWITHSUNDEEP
htmlcss
user391986
user391986

Reputation: 30956

CSS 100% is not being respected when I zoom

I want to have a yellow rectangle #box-over across the entire screen at width 100%. At default zoom level on Google Chrome (I've not tried all browsers) it works fine unless I zoom in beyond 300% or so then that yellow box no longer is 100% of the screen it gets clipped and a horizontal scroll bar appears at the bottom. I can't seem to figure out how to fix this behavior.

JSFIDDLE http://jsfiddle.net/VySGL/1/

SCREENSHOT enter image description here

SOURCE 

        <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            background-color: black;
        }

        #box {
            width: 100%;
            position: relative;
        }

        #box #box-over {
            z-index: 1;
            width: 100%;
            height: 50px;
            background-color: yellow;
            position: absolute;
            top:10px;
            opacity:0.8;

        }           

        #box #box-over .box-column {
            width: 900px;
            margin: 0 auto;
            zoom: 1;
            position: relative;
            height: 50px;
        }
        </style>

    </head>
    <body>

        <div id="box">
            <div id="box-over">
                <div class="box-column">
                </div>
            </div>
        </div>

    </body>
</html>

Upvotes: 3

Views: 4860

Answers (2)

Split Your Infinity
Split Your Infinity

Reputation: 4229

An alternative for using 100% width is to set left and right to 0 in CSS like this...

See JSFiddle

#box #box-over {
    z-index: 1;
    left: 0;
    right: 0;
    height: 50px;
    background-color: yellow;
    position: absolute;
    top:10px;
    opacity:0.8;

}           

#box #box-over .box-column {
    left: 0;
    right: 0;
    margin: 0 auto;
    zoom: 1;
    position: absolute;
    height: 50px;
}

Using the left and right properties ensure you never exceed 100% width even when you add padding (See this JSFiddle).

For example when you add padding to your div it will be 100% plus the padding. See JSFiddle

Upvotes: 4

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70199

Your inner 900px div overflows the outer div's 100% width when you zoom. You can give a max-width:100% to .box-column:

#box #box-over .box-column {
    [...]
    max-width: 100%;
}

Fiddle

This will force the inner div to respect the container's width.

Another solution is to set the #box-over's overflow to hidden or scroll. This way the inner div will still have 900px width equivalent in aspect ratio.

Upvotes: 1

Related Questions