CSS 属性宽度：100%；使页面更长答案

【问题标题】：CSS property width: 100%; make a page longerCSS 属性宽度：100%；使页面更长
【发布时间】：2012-02-21 09:35:45
【问题描述】：

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

红色DIV的CSS属性为：

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

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

【问题讨论】：

你能提供更多代码吗？你给我们的东西很好用：jsfiddle.net/r7dZd

标签： css html width css-position

【解决方案1】：

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

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

【讨论】：