html - div 背景在缩放时显示为白色

Question

我在缩放时遇到问题，如果任何 div 具有背景颜色/边框，当我放大它时它会显示为完全白色。

我尝试放大 Facebook 网站，但没有出现此问题。

这张图片可以让问题更清楚。

那么问题是什么？

HTML 标题 CSS

header {
  border-bottom: 1px solid #d6d6d6;
  width: 100%;
  padding-bottom: 10px;
  background-color: #BF0404;
  color: white;
  background-position:bottom;
}

Answer 1

如果窗口底部出现水平滚动条时出现问题，

然后不要使用 width:100% 。无论如何，这是 block 元素的默认值，对于流中的元素是无用的；。

width:100% 将缩小其在屏幕宽度上的布局(如果它在 CSS 中具有有效宽度，则缩小其父布局)。

要让您的页眉超出父级的宽度，请为其提供一个允许其自然扩展(或收缩)的布局。

header {
  min-width:100%;/* as a block element , it should cover all width avalaible, make sure it does */
  display:table;/* will expand , so background will too*/
}

DEMO