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.

来源：https://stackoverflow.com/questions/11694856/extend-a-div-the-length-of-its-container

标签

css

html

extend