Question

我希望整个屏幕上的宽度为100％的黄色矩形＃box-over 。在谷歌浏览器的默认缩放级别（我没有尝试过所有浏览器）它工作正常，除非我放大超过300％左右，然后黄色框不再是100％的屏幕被剪裁并在底部显示一个水平滚动条。我似乎无法弄清楚如何解决这个问题。

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

SCREENSHOT enter image description here

来源

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

Answer 1

使用100％宽度的另一种方法是在CSS中将左右设置为0 ...

请参阅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;
}

使用左右属性确保即使添加填充也不会超过100％宽度（请参阅this JSFiddle）。

例如，当您向div添加填充时，它将是100％加上填充。见JSFiddle

Answer 2

缩放时，内部900px div会溢出外部div 100%宽度。您可以max-width:100% .box-column：

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

Fiddle

这会强制内部div尊重容器的宽度。

另一种解决方案是将#box-over＆＃39; overflow设置为hidden或scroll。这样，内部div的宽高比仍然等于900px宽度。

缩放时，CSS 100％不受尊重

2 个答案: