css - 滚动时宽度大于窗口宽度的元素只有部分背景颜色

Question

我有一些应用了背景颜色的部分。当浏览器窗口宽度小于页面宽度时，会出现水平滚动，但具有背景色的元素区域也会减少 - 颜色仅适用于从左侧开始等于窗口宽度的部分元素。

我已将 HTML 和 CSS 减少到仍然显示问题的最低限度。我在 IE11 和 FF42.0 上看过这个。

h3 {font-size: 3em;}
.widthContainer {width: 960px;}
.test {background-color: #3870d0;}

<div class="test">
    <div class="widthContainer">
        <h3>The background color won't cover the whole heading!</h3>
    </div>
</div>

Answer 1

默认情况下，div 元素的宽度为其父元素宽度的 100%。在这种情况下，带有背景的 .test 元素与窗口的宽度相同，这就是背景不会超出窗口宽度的原因。

解决此问题的唯一方法是在具有背景的元素或其祖先元素之一上设置显式 width/min-width。

h3 {font-size: 3em;}
.container { min-width: inherit; /* optional */}
.test {background-color: #3870d0; min-width: 960px; }

<div class="test">
    <div class="container">
        <h3>The background color will cover the whole heading!</h3>
    </div>
</div>