将 div 垂直拉伸到其父级，而不是整个页面答案

【问题标题】：Stretch div vertically to its parent, not to the whole page将 div 垂直拉伸到其父级，而不是整个页面
【发布时间】：2012-05-05 00:28:42
【问题描述】：

我正在尝试做这件事，这显然会让很多人头疼，我找到了一些接近解决方案，但不是我需要的。我想要一个左侧边栏 div 和一个右侧主要内容 div。在这些之下，一个页脚。在侧边栏中，我想从 div 的顶部到底部运行一条带，填充背景图像，并且我希望它停止在页脚上方，与主要内容 div 的高度匹配，无论高低。

如果你想看看我在寻找什么，我在http://lumn.net/about.html 提供了一个示例页面。没有任何链接处于活动状态，代码也非常混乱——这周我真的在自学 CSS。但至少你可以看到我设想的布局。

我尝试从到有问题的 div 声明一堆“height:100%”，这使它伸展到整个页面，但不匹配其父级的高度。仅在“strip”div 上使用“height:100%”，其父级似乎没有做任何事情。我还尝试了“position:absolute;top:0;bottom:0”，它也没有做任何事情。 div 消失了（因为里面除了背景图片什么都没有）。

然后我尝试了一个在 http://www.cssnewbie.com/equal-height-columns-with-jquery/ 找到的 jQuery 插件，但要么我不知道如何正确调用它，要么我的页面中的某些东西阻止了它工作。

【问题讨论】：

那么你的问题是侧边栏没有延伸到页脚吗？您的问题对于您的问题到底是什么有点模糊。
是的。如果我以像素为单位声明高度，我只能让它显示出来。我希望它在较长的页面上伸展得更长，在较短的页面上伸展得更短。

标签： css html vertical-alignment stretch

【解决方案1】：

不如把侧边栏作为背景图片放在内容 div 中并使用

background: url('image.jpg') repeat-y;
padding-left: 210px;

在主要内容 div 上使其从左侧向下运行。像这样：http://jsfiddle.net/JMC_Creative/dMbmP/

我知道这不会给出与您的示例页面完全相同的结果，但您能否从中推断出一些适合您的结果？

【讨论】：

需要repeat-y，因为它是垂直的（你的小提琴中也有它。）Repeat-x 不起作用。
我没想到会像这样颠倒背景。我想我仍然需要 div 成为条带本身的形状，这样我才能使阴影发生。

【解决方案2】：

为了使相对大小正常工作，您必须为父对象和子对象指定“位置：相对”，并且父对象必须具有指定的高度，无论是静态的、相对的还是绝对的。

其次，您需要流体等高列，因此您需要制作一个主列，然后侧列需要作为主列的子列存在。然后简单地为左列声明一个负的左边距，为右列声明一个负的右边距。这是每个人都会使用的技巧。

【讨论】：

我也没有看到它是如何工作的——你能举个例子吗？我不认为我见过的任何变体都以这种方式使用边距。
看看这个，它叫做liquid layout。这个想法是该列需要成为中心列的子列才能接收其属性，但这并不一定意味着它必须在字面上 inside 父列。