3

我有一个我正在工作的小网站，除了内容区域之外，基本上所有内容都是固定的。我希望该内容区域一直扩展到浏览器窗口的底部。当网站首次以 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);
4

3 回答 3

0

只需从#mainCopy 中删除“底部：0”。您的元素是绝对定位的，因此它只会到达其引用容器的底部，即#copyContainer。

于 2012-11-19T22:17:57.447 回答
0

我认为您使用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:1000px使用with:960px
  • 您正在使用margin-top:xxx绝对top:xxx定位的 div
于 2012-11-19T22:02:06.827 回答
0

影响填充元素的大小。

你的风格大概是这样

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);
于 2012-11-19T20:10:18.307 回答