CSS 元素在缩放时不会变成页面的宽度

Question

http://jsfiddle.net/aN57Q/1/

当我缩放我的页面时，一个元素最终会拉伸它，当它拉伸时，你会得到与上面 jsFiddle 中的情况非常相似的情况。

蓝色元素代表拉伸页面的元素，不可更改，其余为公平游戏。我需要红色框来适当地填充页面。

提前非常感谢！

<div class="a">A</div>
<div class="b">B</div>
<div class="c"></div>

<div class="somethingBig">Blah!</div>

div {
    height: 50px;
    background-color: red;
    margin-bottom: 10px;
    font-family: Verdana;
    color: white;
    font-size: 30px;
    line-height: 50px;
}

.a { width: 100%; }
.b { width: 100vw; }
.c { width: 100%; }

.somethingBig {
    width: 600px;
    background-color: blue;
}

Answer 1

好的，这与浏览器窗口较小时发生的情况相同，因此红色条没有蓝色条宽。它们只走100%的身体，比溢出的蓝色还要小。

你可以在你的“div”CSS上做min-width:600px;。