CSS 将侧边栏拉伸到 100% 的页面。窗口调整大小或内容太大时中断答案

【问题标题】：CSS Stretching sidebar to 100% of page. Breaks when window resized or content too largeCSS 将侧边栏拉伸到 100% 的页面。窗口调整大小或内容太大时中断
【发布时间】：2012-03-19 20:44:43
【问题描述】：

至少已经为此苦苦挣扎了几个小时。尝试四处搜索，但似乎没有解决方案有效。所以无论如何，我有一个正在处理的模板，我遇到的问题是左侧的侧边栏不会一直向下延伸！如果窗口最大化，它看起来完全没问题。一旦你调整了窗口的大小，它就会中断，在侧边栏和页脚之间留下很大的间隙。如果内容在页面上的下载量比当前更多，它也会中断...

在这里亲自查看：http://bakedcraft.ca/laboratory/testsites/crock/template.html

和 css：http://bakedcraft.ca/laboratory/testsites/crock/css/default.css

有什么想法吗？

【问题讨论】：

标签： html css height stretch

【解决方案1】：

将 position:relative 添加到您的 .main 类中

现在您的侧边栏是窗口的 100% 高度，而不是主容器。通过添加 position:relative 到侧边栏的父级，当侧边栏为 100% 高度时，它变为主 div 的 100%。

【讨论】：

奇怪的是它不适合你。当我添加位置时：相对；到第 86 行的 div.main 元素中的 default.css 行（使用 Chrome 开发人员工具），它似乎工作正常。如果你想要一个 javascript 方法，你可以试试 $(".sidebar").height($(".main").height());这会将侧边栏的高度设置为主 div 的高度
有趣。我只是尝试了同样的事情，你的权利，它确实有效！在发表这篇文章和您的原始评论之间，尽管由于我在删除内容时发现的几个非常糟糕的错误，我更改了一堆 CSS，所以当我尝试将其设置为 positon: relative 在我的本地副本上时它没有工作。不过我想我现在可以弄清楚了，谢谢！
很高兴为您提供帮助。如果您不介意，可以将问题标记为已回答吗？

【解决方案2】：

对不起，这不是一个真正的答案，但它不允许我写评论......

我在 firebug（firefox + web developer add-on）中查看了您的代码，它显示了 467px 高度的框约束我试图快速找到这个 467px 的来源，但无法快速查看（现在是凌晨 4 点）。它从某个地方继承了那个高度，很可能是来自相关元素的其他大小限制的组合。鉴于您正在进行的所有定位，可能很难找到。

我的一个建议是，如果您打算制作流畅的布局，您应该使用 em 而不是直像素。正如我所说，这不是答案，但我确实注意到了侧边栏的大小限制。如果这个问题在早上仍然存在，我会看看是否可以为您更好地查看它。

【讨论】：

【解决方案3】：

好吧，我一直在想你的问题，我想我已经明白了。原谅我，因为我在我的手机上输入这个并且不能使用萤火虫来验证我是否正确，但我之前注意到的 467px 的约束不是从另一个容器继承的，它被文本中的文本所包含侧边栏 div。如果您要添加更多文本，该框将随之增长。我相信你可能想要做的是在侧边栏 div 中创建一个子容器。您的主要侧边栏 div 将仅容纳您的灰色背景颜色灰色。在侧边栏 div 中创建一个子 div，并将您的文本和图像放入其中。确保在父 div 上将其高度设为 100%。子 div 内元素的高度不需要指定高度，因为它们将从父侧边栏 div 继承。希望这是有道理的。

您可以使用 jquery 进行前面提到的修复，但请记住，如果有人关闭了他们的 JavaScript，那么您的问题仍然存在，您的页面将会中断。您应该尝试找到并解决根本原因，而不是使用可以取下的创可贴。

【讨论】：