2

我是 CSS 新手，但遇到了问题。我想让侧边栏内容高度与正文匹配或等于相同高度。我目前正在使用，但这仅适用于声明高度：

   min-height: 240px;

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

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

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

4

4 回答 4

2

我不敢相信人们真的关心 Javascript 被禁用。这是一个不存在的问题。我同意弗兰克的观点。禁用 JS 甚至不应该是一个选项。

永远不要担心用户没有启用 JS，应该让它休息。

于 2013-01-15T23:46:54.917 回答
1

Since you tagged jQuery it's possible to do this using javascript.

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

That will match the sidebar content height to the main content height. Put that inside the head tag, and be sure to include the jQuery library.

A pure CSS solution is going to take much more work as already pointed out.

Here's the changes included in the jsfiddle

于 2012-09-01T21:19:39.760 回答
1

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

不过还是有希望的：Matthew Taylor 就这个问题写了一篇出色的文章，尽管我怀疑要使用他的解决方案，您需要稍微编辑一下您的结构。

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

于 2012-09-01T21:14:36.690 回答
0

那里的许多解决方案都不起作用或太复杂。（令人沮丧，考虑到这对表格来说很容易。）

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

首先，使用 CSS 明确定义所有图像的宽度和高度。如果您不指定图像的大小，浏览器将无法知道页面的高度或宽度（用于换行）。

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

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

当然，您的页面会有所不同。这是一个更完整的例子。

本质上，您的侧边栏在滑入到位后会调整大小。这可以防止您的侧边栏在您的字体有机会加载之前将其自身调整得太短。

于 2014-11-11T01:20:15.990 回答