3

我想在整个屏幕上以 100% 的宽度有一个黄色矩形#box-over 。在Google Chrome上的默认缩放级别（我没有尝试过所有浏览器）它工作正常，除非我放大超过 300% 左右然后那个黄色框不再是它被剪裁的屏幕的 100% 并且水平滚动条出现在底端。我似乎无法弄清楚如何解决这种行为。

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

截屏 在此处输入图像描述

来源 

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

2 回答 2

4

使用 100% 宽度的另一种方法是在 CSS 中将 left 和 right 设置为 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;
}

使用 left 和 right 属性可确保即使添加填充时也不会超过 100% 的宽度（请参阅此 JSFiddle）。

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

于 2013-01-22T23:56:50.243 回答
1

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

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

小提琴

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

另一种解决方案是将#box-over's设置overflow为hidden或scroll。这样，内部 div900px的宽高比仍然相等。

于 2013-01-22T23:41:10.350 回答