CSS 属性宽度 : 100%; make a page longer

Question

我有一个非常简单的布局，页面中只有银色背景和红色 DIV，如下图所示。我的问题是，当我将红色 DIV 添加到我的布局页面时，该页面的长度超过 100%(右下角底部 - slider )。可能是哪里的问题导致了这种情况？

红色 DIV 的 CSS 属性是:

html, body {
   background-color: silver;
   margin: 0;
   padding: 0;
 }

.red-div {
    overflow: hidden;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

Answer 1

.red-div {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right:0; /* This is what you need */
}

这样，您可以强制它转到浏览器的末尾。当您执行 100% 时，您不会考虑滚动条。这增加了额外的空间，从而增加了烦人的横向滚动