CSS 100%高度问题

Question

我正在处理一个小网站，除了内容区域，基本上所有东西都固定了。我想让内容区域一直扩展到浏览器窗口底部。当在1024x768的屏幕分辨率下首次加载该网站时，似乎工作正常，但如果向下滚动，文字内容会继续但是背景颜色不会延伸。我已经搜索了解决方案，但迄今为止没有找到任何有用的信息。

这是网站链接：www.atriaseniorliving.com/cah/our_process.html 编辑:

这是我正在使用的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;

}

#mainCopy {
display: block;
width: 390px;
height: auto !important;
margin: 127px 0 0 0;
padding: 30px;
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);

- NickR

---

建议你不要链接到你的网站，而是把你的问题代码放在代码块中让其他人来审查，或者甚至可以构建一个 fiddle 来展示你的代码，这可以让协助你的人更清楚地看到问题所在。 - Malkus

我看到主图像上方有一个蓝色背景的垂直滚动条。滚动正常，但它重叠在上部块上。请在样式表中尝试使用**display:block;**。使用Firefox 16.02。 - Felipe Alameda A

Answer 1

影响元素的填充大小。

你的样式可能是这样的

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);

- ILker Özcan

---

移除“bottom: 0;”会使其不会完全扩展到浏览器窗口的底部。 - NickR

Answer 2

我认为你使用height:100%的方式是错误的... height: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个不同的嵌套包装器
• 过多地使用position:absolute和position:fixed而没有必要
• 使用with:960px代替with:1000px
• 在绝对定位的div上，使用top:xxx而不是margin-top:xxx

- Tomas Ramirez Sarduy

Answer 3

只需从#mainCopy中删除'bottom: 0'。您的元素被绝对定位，因此它只会到达其参考容器#copyContainer的底部。

- Rob