CSS 100％高度问题

我有一个小型网站，我工作的地方基本上一切都是固定的，除了内容区域。我希望该内容区域一直展开到浏览器窗口的底部。当网站首次以1024x768的屏幕分辨率加载时，它看起来可以正常工作，但如果向下滚动复制，但彩色背景不会。我已经寻找解决方案，但迄今为止我还没有运气。CSS 100％高度问题

下面是该网站的链接：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);

来源

2012-11-19 NickR

而不是链接到您的网站。我建议将你的问题代码放在代码块中供其他人查看，或者甚至可以构建你的代码的[小提琴]（http://jsfiddle.net/），它可以帮助人们确切地看到你的问题可能在哪里。 – Malkus

我在主图形顶部看到一个带有蓝色背景的垂直滚动条。滚动确定，但它与上面的块重叠。在你的样式表中尝试** display：block; **。使用Firefox 16.02。 –

影响的大小填充元素。

你的风格大概这

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-19 20:10:18

删除“bottom：0”使它不会一直扩展到浏览器窗口的底部。 – NickR

我认为你正在使用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个diferents嵌套包装
要多大用处的position:absolute和position:fixed无需
代替with:1000px使用with:960px
你是绝对定位的div使用margin-top:xxx代替top:xxx

来源

2012-11-19 22:02:06

只需从#mainCopy中删除'bottom：0'即可。你的元素是绝对定位的，所以它只会到它的#copyContainer参考容器的底部。

来源

2012-11-19 22:17:57 Rob

CSS 100％高度问题

回答

相关问题