垂直拉伸的div其母公司，而不是整个页面

我试图做这件事情，显然会导致很多人头疼的，我已经找到了一些附近的解决方案，但不完全是我所需要的。我想要一个左侧边栏div和右侧主内容div。在这些之下，一个页脚。在侧边栏中，我想从div的顶部到底部运行一个条带，并填充背景图像，并且我希望它停止在页脚上方，与主内容div的高度相匹配，无论高度还是短。垂直拉伸的div其母公司，而不是整个页面

如果你想看到我后，我提出了一个示例页面在http://lumn.net/about.html。没有一个链接是活跃的，代码非常混乱 - 我本周只是在自学css。但至少你可以看到我设想的布局。

我试着从<html>向下通过有问题的div声明一堆“height：100％”，这样就可以在整个页面上展开，但不能匹配父窗口的高度。仅在“strip”div及其父母上使用“height：100％”似乎不会执行任何操作。我也试过“位置：绝对;顶部：0;底部：0”，这也没有做任何事情。该div消失（因为它没有任何内容，但背景图像）。

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

来源

2012-05-05 poetiscariot

所以你的问题则边栏没有延伸到尾？你的问题在你的问题是什么时候有点朦胧。 –

是的。如果我以像素为单位声明高度，我只能看到它。我希望它在更长的页面上伸展更长，短的更短。 – poetiscariot

你怎么样只是把侧边栏的内容DIV中的背景图片，并使用

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

的主要内容div来让它跑下来左侧。像这样：http://jsfiddle.net/JMC_Creative/dMbmP/

我知道这样的结果并不完全像你的示例页面，但是你能够推断出某些东西来为你工作吗？

来源

2012-05-05 00:46:14 JakeParis

需要'repeat-y'因为它是垂直的（就像你在你的小提琴中一样）。'Repeat-x'将不起作用。 –

@JT当然。谢谢，那就是我的意思。 – JakeParis

颠簸的背景就这样没有发生在我身上。尽管如此，我认为我仍然需要div来成为带子本身的形状，这样我才能使阴影发生。 – poetiscariot

为了相对大小正常工作，必须指定“位置：亲属”父和子对象，而母公司必须有指定的高度，无论是静态的，相对或绝对的。

其次，你要流体相同高度列，所以你需要一个主塔，然后边柱需要存在作为主柱的孩子。然后简单地为左列声明一个负的左边距，右边的一个右边的右边距。这是每个人都使用的技巧。

来源

2012-05-05 01:04:41 Jamie

从未见过那招。负利润率是做什么的？ – JakeParis

我没有看到它是如何工作的 - 你能举个例子吗？我不认为我见过的任何变化都会以这种方式使用空白。 – poetiscariot

检查了这一点，这就是所谓的[液态布局（http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-33-fluid-fluid-fluid/）。这个想法是，该列需要成为中心列的孩子才能接收其属性，但这并不一定意味着它必须从字面上_side_父列。 – Jamie

垂直拉伸的div其母公司，而不是整个页面

回答

相关问题