CSS 100％高度问题

Question

I have a small site I'm working where basically everything is fixed except for the content area. I want that content area to expand all the way to the bottom of the browser window. When the site is first loaded at a screen resolution of 1024x768 it appears that it works but if you scroll down the copy continues but the colored background does not. I have searched for a solution but I've had no luck so far.

Here is a link to the site: www.atriaseniorliving.com/cah/our_process.html

Edit:

Here is the css I am using:

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

Answer 1

affects the size of the padding the element.

your style probably this

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

Answer 2

I think you are using height:100% incorrectly... height:100% is referring to the height of your browser window. And what you think happen when an inner element has bigger height that his parent? That's your case: #mainCopy has bigger height than browser window and therefore bigger height than #copyContainer . You just need to update few styles:

#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
}

Another things you can do to improve your code:

• The header has no height. has not height
• You are using like 3 diferents nested wrappers
• To much use of position:absolute and position:fixed without need
• Instead of with:1000px use with:960px
• You are using margin-top:xxx instead top:xxx on absolute positioned divs

Answer 3

Just remove 'bottom: 0' from #mainCopy. Your element is positioned absolutely so it will only go to the bottom of its reference container which is #copyContainer.