Question

所有这一切都正常，直到您将窗口缩小以显示水平滚动条。水平滚动时，显示的部分不再具有背景。屏幕最大化后，一切都恢复正常。

<html>
    <body>
        <div style="width:100%; height:200px; background:#339900;">
            <div style="width:1000px; height:75px; background:#ff0000; margin:0px auto;"></div>
        </div>
    </body>
</html>

解决的代码..全部归功于Pyro -

<html>
    <body>
        <div style="min-width:100%; width:1000px; height:200px; background:#339900;"><!--width same as inner box-->
            <div style="width:1000px; height:75px; background:#ff0000; margin:0px auto;"></div>
        </div>
    </body>
</html>

Answer 1

尝试将其修改为这样的百分比：

<html>
<body>
    <div style="width:100%; height:200px; background:#339900;">
        <div style="width:80%; height:75px; background:#ff0000; margin:0px auto;"></div>
    </div>
    <div style="width:100%; height:200px; background:#dddddd;">
        <div style="width:80%; height:75px; background:#000000; margin:0px auto;"></div>
    </div>
</body>
</html>

这是正常的，因为最小化屏幕中的绿色空间占据此屏幕的100％并且滚动条出现，因为您需要1000px的红色空间。

Answer 2

您将4种颜色（绿色和灰色）设置为100%，这会将其设置为视口的宽度。但红色和黑色是1000px。

“当我水平滚动时，100％的绿色背景消失”

这是因为，假设您的窗口宽600px，它相当于：

width: 600px;

因此，当您滚动时，由于1000px宽div，浏览器会生成滚动条以查看所有这1000个像素。

“我知道我可以用百分比来解决这个问题，但这是针对宽度必须修正的项目。请帮助修复宽度为1000px的问题。”

如果屏幕上已经有1000px的滚动条，并且您不希望在滚动时不显示100%颜色，则可以将100%设置为{ {1}}，这样颜色的颜色与其他颜色的长度相同。

现在，如果屏幕比1000px宽，并且您希望1000px颜色在该宽度处切断，但其他颜色仍然填满整个宽度，那么您可以添加：

1000px

这将确保颜色始终填满整个屏幕。

另一种选择是min-width: 100%;，但这只有在颜色总是处于同一位置时才会起作用（或者你需要一些JavaScript，但我不认为值得）。

调整浏览器窗口大小时，会出现水平滚动条。在滚动时，bg颜色从滚动区域消失

2 个答案: