Extend a Div the Length of it's Container

问题:

I am trying to extend my left sidebar so that it spans the length of the page (or the container DIV). I tried setting the height of the container to 100% and then the height of the sidebar to 100%, but that did not work.

Here is my coding:

div#container { overflow: hidden; margin-left: auto; margin-right: auto; margin-top: 0px;     padding-bottom: 10px; width: 880px;    height: 100%; text-align: left; }  div#left { float: left; width: 280px; height: 100%;    padding: 4px;    background: #F1D7A5; } 

And here is what the page looks like: http://www.studentbridges.org/new/

Any input on how I can extend the sidebar would be greatly appreciated!

Thank you!

~Noelle

回答1:

I usualy solve this problem by putting the background of the sidebar as an image on the container of the sidebar, and repeating it along the y-axis. This does not actualy strectch your sidebar, but it looks the same. In your case you could just take a printscreen of your page as it is now, crop it to 1px height and 880px width, and setting it as the background of your #container:

background: url(<path_to_image>) repeat-y center; 

You can also remove the background from #left then. Everything to avoid using tables!

回答2:

Setting the height to 100% restricts the height of the container. If you set the container to the pixel height you'd like it to be, the sub-div will extend its height to match. Because your lower div is a sub-div of its container, height: 100% will only result to the remaining length left in the container div, as you can see.

文章来源: Extend a Div the Length of it's Container