【发布时间】：2012-08-27 05:19:12
【问题描述】：
我是 CSS 新手，但遇到了问题。我想让侧边栏内容高度与正文匹配或等于相同高度。我目前正在使用，但这仅适用于声明高度：
min-height: 240px;
您可以在这里找到该网站：http://jsfiddle.net/ZPvLb/
向下滚动页面，直到看到正文，右侧是侧边栏。看出区别了吗？
关于我如何做到这一点的任何建议或帮助？谢谢！
【问题讨论】：
【发布时间】：2012-08-27 05:19:12
【问题描述】：
我不敢相信人们真的关心禁用 Javascript。这是一个不存在的问题。我同意弗兰克的观点。禁用 JS 甚至不应该是一个选项。
永远不用担心用户没有启用 JS，这应该被搁置。
【讨论】：
由于您标记了 jQuery，因此可以使用 javascript 来执行此操作。
<script type="text/javascript">
$(document).ready( function() {
$('.content', '#side').height($('.content', '#main').height());
});
</script>
这将使侧边栏内容高度与主要内容高度相匹配。把它放在 head 标签内，并确保包含 jQuery 库。
如前所述，纯 CSS 解决方案需要做更多的工作。
这是jsfiddle中包含的更改
【讨论】：
-
好的，我得到了语法，但是我将如何将它实现到 css 侧边栏样式中？ jq 新手！
-
根据您的评论更新解决方案
-
非常简单！我的朋友做到了，非常感谢你！！！！！！！我相信这对很多想要这样做的人会很有帮助......
这被一些 CSS 的“圣杯”称为，并且有充分的理由：这样做非常不直观，主要是由于 CSS 高度的工作方式。
不过还是有希望的：Matthew Taylor 就这个问题写了一篇出色的文章，不过我怀疑要使用他的解决方案，您需要稍微修改一下结构。
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
【讨论】：
-
你好 Sudowned 但可以使用下面的 Jquery 更轻松、更快速地实现......但这有助于了解。也非常感谢您的帮助！！！
-
@FrankG.，jQuery（或者实际上是 JavaScript）是一个糟糕的解决方案。将 JS 用于布局代码意味着您的网站在禁用 JS 的浏览器上看起来很糟糕，这可能不是您想要的。
-
是的，但 css 也是如此。比可以改变字体大小、颜色等......不幸的是，浏览器给了用户很多控制权。不再允许禁用 cookie 和 JS。技术越来越依赖它们。至少这是我的看法！！谢谢！
-
几乎不存在不支持 CSS 的浏览器百分比，禁用它的用户明确选择浏览损坏的网站。相比之下，在美国有 1-4% 的观众浏览时禁用了 JavaScript，而布局——不是功能，而是布局本身——在脚本关闭时中断是根本不同的。您的页面可能会验证，但使用 JavaScript 解决此问题是错误的。
-
“用 JavaScript 解决这个问题是错误的”。 Javascript 对于与样式相关的任务很有用，禁用 js 的用户只会看到较短的侧边栏，这完全没有问题。 javascript 唯一出错的地方是与内容相关的任务，例如通过 ajax 加载内容等。
那里的许多解决方案都不起作用或太复杂。 （令人沮丧，考虑到这对表格来说很容易。）
通常是主页出现故障，因为字体和图像在调整侧边栏大小之前没有机会加载，尤其是在连接速度较慢的情况下。
首先，使用 CSS 明确定义所有图像的宽度和高度。如果您不指定图像的大小，浏览器将无法知道页面的高度或宽度（用于换行）。
接下来，就网络字体而言，这是我的解决方案。只需使用 jQuery 将您的内容“滑动”到位。这只需要在主页上发生一次。
$(function() {
$("#content").slideDown('slow').promise().always(function(){
$("#sidebar").height($("#content").height()); // drop sidebar down
}); // Just show homepage content
});
当然，您的页面会有所不同。这是一个更完整的example。
基本上，您的侧边栏在滑入到位后会调整大小。这可以防止您的侧边栏在您的字体有机会加载之前将其自身调整得太短。
【讨论】：