Question

也许标题不容易理解，抱歉。

我的问题详细：我创建了一个带有标题的wordpress主题。这个标题被“header-div”包围。标题div的宽度为100％，背景为彩色。但是，如果下面另一个div中的内容溢出视口并且您滚动水平，则背景为白色。

我知道“宽度：100％”只是父元素的100％，但只有正文。身体有“宽度：100％和高度：100％”。

错误在哪里？

这是网站：

http://ericgerhardy.de/selltron/

尝试将浏览器宽度减小到500px并向右滚动。这应该表明我的问题。

PS。如果问题已经回答，我很抱歉，但我搜索了一段时间，没有结果。

Answer 1

出现白色背景是因为您在标题下方的某些元素处设置了最小宽度：1000px。

如果您唯一关心的是防止白色背景出现在较小屏幕上标题的右侧而您不关心有响应页面（如果我理解您的问题就是这种情况），那么你需要将 min-width：1000px; 添加到你的 #header 中，如下所示：

#header {
    background-color: #D3D0CE;
    height: 245px;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    z-index: 99999;
    min-width: 1000px; /* This is the extra line */
}

Answer 2

问题在于，绝对定位的元素不会调整其父级的大小但会溢出它们。

在这种情况下，你的身体会溢出并出现滚动条但是他的大小仍然是视口的100％，因为他没有展开。

滥用绝对立场往往会导致这些问题。尝试尽可能使用静态定位。在这种情况下，使用静态定位非常容易。

宽度为100％的DIV仅为视口的100％

2 个答案: