Html CSS 100%高度问题

我有一个小网站，我的工作，基本上一切都是固定的，除了内容领域。我希望内容区域一直扩展到浏览器窗口的底部。当网站第一次以1024x768的屏幕分辨率加载时，它似乎可以工作，但如果向下滚动，复制将继续，但彩色背景不会。我一直在寻找解决办法，但到目前为止我运气不好

以下是该网站的链接：

编辑：

以下是我正在使用的css：

#copyContainer {
width: 1000px;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
position: relative;

font-family: 'Droid Serif';
font-size: 16px;
line-height: 24px;

}

---

影响填充元素的大小

你的风格可能是这样的

display: inherit;
width: 390px;
height: auto;
margin: 127px 0 0 0;
padding: 30px 0px 0px 0px;
position: absolute;
top: 0;
left: 505px;
z-index: 99;
-webkit-box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, .6);
box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, .6);

---

我认为您使用的高度：100%不正确<代码>高度：100%指的是浏览器窗口的高度。当一个内部元素的高度比其父元素高时，你认为会发生什么？这就是您的情况：#mainCopy的高度比浏览器窗口大，因此比#copyContainer的高度大。您只需要更新几个样式：

#copyContainer {
   width: 1000px;
   margin: 0 auto;
   font-family: 'Droid Serif';
   font-size: 16px;
   line-height: 24px;
   height: 100%;
}
#mainCopy{
   display: block;
   width: 390px;
   margin: 127px 0 0 0;
   padding: 30px;
   float: right; //No need position:absolute
   bottom: 0;
   top: 0;
   left: 505px;
   right: 0;
   z-index: 99;
   -webkit-box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, .6);
   box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, .6);
}
#middleContainer {
   width: 100%;
   background: #D9D9D9;
   position: absolute;
   top: 128px;
   z-index: -1; //Because the image was over the text
}

您可以做的另一件事是改进代码：

• 收割台没有高度。他没有身高
• 您正在使用3个不同的嵌套包装器
• 大量使用

  位置：绝对

  和

  位置：固定

  ，无需
• 使用

  with:960px

• 您在绝对定位div上使用的是

  边距顶部：xxx

  而不是

  顶部：xxx

---

只需从#mainCopy中删除“底部：0”。您的元素处于绝对位置，因此它只会进入其引用容器（即#copyContainer）的底部。

而不会链接到您的站点。我建议将您的问题代码放在代码块中，供其他人查看，或者甚至构建您的代码，这样可以帮助人们准确地看到您的问题所在。我看到主图形顶部有一个蓝色背景的垂直滚动条。滚动正常，但它与上部块重叠。尝试显示：块；在样式表中。使用Firefox 16.02。删除“底部：0；”使其不会一直扩展到浏览器窗口的底部。

#copyContainer {
   width: 1000px;
   margin: 0 auto;
   font-family: 'Droid Serif';
   font-size: 16px;
   line-height: 24px;
   height: 100%;
}
#mainCopy{
   display: block;
   width: 390px;
   margin: 127px 0 0 0;
   padding: 30px;
   float: right; //No need position:absolute
   bottom: 0;
   top: 0;
   left: 505px;
   right: 0;
   z-index: 99;
   -webkit-box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, .6);
   box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, .6);
}
#middleContainer {
   width: 100%;
   background: #D9D9D9;
   position: absolute;
   top: 128px;
   z-index: -1; //Because the image was over the text
}