Question

我是css的新手，但遇到了问题。我想让侧边栏内容高度与身体相匹配或等于相同的高度。我目前正在使用，但这只对说明高度有利：

   min-height: 240px;

您可以在此处找到该网站：http://jsfiddle.net/ZPvLb/

向下滚动页面直到看到正文，右侧是侧边栏。看到区别？

有关我如何做到这一点的任何建议或帮助？谢谢！

Answer 1

我无法相信人们实际上是在关注Javascript被禁用。这是一个不存在的问题。我同意FrankG。禁用JS甚至不应该是一个选项。

永远不要担心用户没有启用JS，只需要休息。

Answer 2

这被一些CSS的“圣杯”所称，并且有充分的理由：它非常不直观，主要是因为CSS高度的工作方式。

但是有希望：马修泰勒对这个问题做了很好的写作，虽然我怀疑要使用他的解决方案，你需要稍微编辑你的结构。

http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

Answer 3

由于您标记了jQuery，因此可以使用javascript执行此操作。

<script type="text/javascript">
    $(document).ready( function() {
        $('.content', '#side').height($('.content', '#main').height());
    });
</script>

这会将侧边栏内容高度与主要内容高度相匹配。把它放在head标签内，并确保包含jQuery库。

如前所述，纯CSS解决方案将需要更多的工作。

以下是jsfiddle

中包含的更改

Answer 4

许多解决方案只是不起作用或太复杂。（令人沮丧的是，考虑到表格很容易。）

这通常是主页被破坏，因为在调整侧边栏大小之前，字体和图像没有机会加载，尤其是在连接速度较慢时。

首先，使用CSS明确定义所有图像的宽度和高度。如果您未指定图像的大小，则浏览器无法知道页面的高度或宽度（用于包装文本）。

接下来，就网络字体而言，这是我的解决方案。只需使用jQuery“滑动”您的内容即可。这只需要在主页上进行一次。

$(function() {
    $("#content").slideDown('slow').promise().always(function(){
        $("#sidebar").height($("#content").height()); // drop sidebar down
    }); // Just show homepage content
});

当然，您的网页会有所不同。这是一个更完整的example。

基本上，在滑动到位后，您的侧边栏会重新调整的大小。在您的字体有机会加载之前，这可以防止侧边栏缩小太短。

获得侧边高度以获得相同的身高

4 个答案: