2

我有一个两列布局，右侧有一个灰色侧边栏。当左栏的高度增加时（由于内容被动态扩展），我需要扩展侧边栏的高度。我可以使侧边栏适合静态页面，但我不能让它随着页面的其余部分增加。做了一些谷歌搜索，但找不到适合我的解决方法。

有谁知道如何做到这一点？

4

8 回答 8

10

这是将 DIVS 用于此类布局时的常见问题。

如果你用谷歌搜索“Faux column”，你应该会得到一些答案。

例如。http://www.alistapart.com/articles/fauxcolumns/

于 2009-10-23T00:05:33.660 回答
10

这可能略有偏差，但如果您在您的网站上使用 jQuery，您可以执行快速计算并将共享类似类的所有 DIV 调整为最大高度：

$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));
于 2009-10-23T00:23:39.880 回答
5

我被这个问题困扰了一段时间，我写了一篇关于这个问题的文章：用假列完成。这是我的论点：

这个问题的基于 JavaScript 的解决方案并不比任何其他解决方案差。事实上，如果你使用 JavaScript，你可能会省去几个小时试图让事情正常工作的挫败感。人们会通过说“如果用户关闭 JavaScript 会发生什么？”来警告您不要这样做。相信我，如果用户关闭了 JavaScript，无论如何，大部分网络对他来说都是坏的。你的侧边栏对他来说并不重要。

正如 cballou 提到的，做这件事的最简单方法是使用 JQuery 代码：

$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));
于 2009-10-23T06:35:06.307 回答
2

我在该特定页面上将其更改background-color为与侧边栏相同的颜色，尽管我的所有部分都有背景，而不是一个整体背景。但这可能并不适合所有人。

在我的样式表中，

.sidec
{
background-color:#123456;
}

在我的 HTML 页面中，

<body class="sidec">

content....

</body>
于 2012-10-01T15:07:24.007 回答
1

我最近看到了一个非常有创意的解决方案，使用 CSS 属性position:absolute和border.

绝对值得一试，看看它是否适合你。

链接：http ://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/

于 2009-10-23T06:24:02.180 回答
1

我不确定这是否会有所帮助，因为我是新手。然而，当我努力让我的侧边栏显示整个内容时，当我将它的大小翻倍时，我做了以下事情。我一直在改变我的高度和宽度，直到我改变了班级。我的班级被列为SB框架SB宽度。因此，当我将班级更改为读取 SB 高度 SB 宽度时，它适合我的内容而不是原始帧大小。我也尝试了 SB max sb width ，但它取出了我的页脚菜单栏（这意味着它不会再显示它了）。我回到SB高度SB宽度，一切都很好。我敢肯定，这对你们所有人来说都是超级傻瓜，但以防万一有另一个像我一样对html代码不太了解的新手阅读这篇文章......我希望这会有所帮助=）祝大家节日快乐！拥抱，塔拉

于 2012-12-11T02:51:41.773 回答
0

我猜你想对你的布局应用某种效果，这样就需要两列一起调整大小。如果您想动态更改列的高度值，我怀疑它只会与 css 一起工作，除非您实现一些 javascript 来控制样式。

正如 Dal 建议的那样，请查看仿列上的链接。顾名思义，解决方案与修改列高度无关。相反，它给人一种“错觉”，即两列似乎具有相同的高度，而实际上它们并非如此——并且使用了背景图像的平铺。

这个想法是没有必要使标记复杂化。简单的结构与图像的“错觉”是网页设计中的常见做法。

问候，约拿

于 2009-10-23T06:02:43.923 回答
0

由于对这里的新成员态度不佳，我预计会因为这个答案而入狱，就这样吧。我通过创建一个宽 960 像素、高 1 像素的背景图像来解决这个问题，其中两种颜色在它们各自的宽度（780 像素和 180 像素）中所需的列。然后，我将其用作容器的背景图像，在 y 轴上重复，并使内容和右侧边栏的背景颜色：透明。

 .container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto; 
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}

.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}

.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}

我确信这种方法有其局限性，但它在我的所有页面上都能完美运行。

有可能我没有很好地解释这一点，如果是这样，请您对它好一点。我将努力扩展我的方法（这可能已经是常识）。

于 2012-12-24T09:41:36.063 回答