延长Div容器的长度 [英] Extend a Div the Length of it's Container

问题描述

我正在尝试扩展左侧边栏，使其覆盖页面(或容器DIV)的长度.我尝试将容器的高度设置为100％，然后将侧边栏的高度设置为100％，但这没有用.

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.

这是我的编码:

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

页面的外观如下: http://www.studentbridges.org/new/

任何有关如何扩展侧边栏的信息将不胜感激！

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

谢谢！

〜Noelle

推荐答案

我通常通过将侧边栏的背景作为图像放置在侧边栏的容器中并沿y轴重复来解决此问题.实际上，这不会占用您的侧边栏，但是看起来一样. 在您的情况下，您可以仅打印页面的当前屏幕，将其裁剪为1px的高度和880px的宽度，并将其设置为#container:

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;

然后，您也可以从#left中删除背景. 一切都要避免使用表格！

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

这篇关于延长Div容器的长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！