当前位置：文江博客话题详情

需要 CSS 侧边栏高度随内容扩展

发布于 2024-08-09 02:42:04 字数 133 浏览 1 评论 0原文

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

有谁知道该怎么做？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陈独秀 2024-08-16 02:42:05

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

$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));

This may be slightly off but if you use jQuery on your site you can perform a quick calculation and resize all DIVs sharing a similar class to the maximum height:

$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));

回复收藏 0 原文

溺孤伤于心 2024-08-16 02:42:05

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

基于 JavaScript 的解决方案
问题并不比其他问题更糟糕
解决方案。事实上如果你正在使用
JavaScript，你可以节省几个小时
试图得到东西时的挫败感
在职的。人们会警告你不要
这是通过说“如果
用户关闭了 JavaScript？”。
相信我，如果用户已经关闭
JavaScript，大部分网络都被破坏了
无论如何对他来说。你的侧边栏没有
对他来说很重要。

正如 cballou 提到的，执行此操作的最简单方法是使用 JQuery 代码：

$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));

I have been haunted by this problem for a while and I wrote an article about this issue: Done with faux columns. Here is what I argued:

JavaScript based solution for this
problem is not worse than any other
solution. In fact if you are using
JavaScript, you may save a few hours
of frustration of trying to get things
working. People will warn you against
this by saying “What will happen if
the user turned off JavaScript?“.
Believe me, if the user has turned off
JavaScript, most of the web is broken
for him anyway. Your sidebar does not
matter to him.

As cballou mentioned, the simplest way to do this thing is to use JQuery code:

$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));

回复收藏 0 原文

空袭的梦i 2024-08-16 02:42:05

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

在我的样式表中，

.sidec
{
background-color:#123456;
}

在我的 HTML 页面中，

<body class="sidec">

content....

</body>

I changed the background-color to the same color as my sidebar, on that specific page, although I do have backgrounds for all my sections rather than one overall background. But that might not work for everyone.

In my stylesheet,

.sidec
{
background-color:#123456;
}

In my HTML page,

<body class="sidec">

content....

</body>

回复收藏 0 原文

度的依靠╰つ 2024-08-16 02:42:05

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

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

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

回复收藏 0 原文

寻找一个思念的角度 2024-08-16 02:42:05

我不确定这是否有帮助，因为我是新手。然而，当我在将侧边栏的大小加倍时努力让侧边栏显示全部内容时，我执行了以下操作。我正在改变我的高度和宽度，但没有任何反应，直到我改变了班级。我的班级被列为 SB 框架 SB 宽度。因此，当我将类更改为读取 SB 高度 SB 宽度时，它适合我的内容而不是原始框架大小。我也尝试过 SB max sb width 也有效，但它去掉了我的页脚菜单栏（意味着它不会再显示）。我回到SB高度SB宽度，一切都很好。我确信这对你们所有人来说都是超级简单的基础知识，但以防万一有另一个新手读这篇文章，像我一样对 html 代码不太了解......我希望这有帮助 =)
祝大家节日快乐！
拥抱，塔拉

回复收藏 0 原文

丢了幸福的猪 2024-08-16 02:42:05

我猜您想对布局应用某些效果，以便需要两列一起调整大小。如果您想动态更改列高的值，我怀疑它是否可以简单地使用 css，除非您实现一些 javascript 来控制样式。

正如达尔建议的那样，请查看人造列上的链接。顾名思义，该解决方案与修改列高度无关。相反，它给人一种“错觉”，即两根柱子看起来具有相同的高度，而实际上它们并非如此 - 并且是使用背景图像的图块。

这个想法是不需要使标记复杂化。简单的结构加上图像的“幻觉”是网页设计中的常见做法。

问候，
约拿

回复收藏 0 原文

如何视而不见 2024-08-16 02:42:05

由于这里对新成员的态度很差，我希望得到这个答案，就这样吧。
我通过创建一个 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;
}

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

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

With the poor attitude towards new members on here I expect to be barracked for this answer, here goes.
I got around this problem by creating a background image 960px wide 1px high with the two colors I needed for the columns in their respective widths (780px and 180px). I then used this as the background image for my container repeated on the y axis and made the content and the right sidebar background-color: transparent.

 .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;
}

I am sure that this method has its limitations but it works perfectly on all my pages.

It is possible that I have not explained this very well, if so, be nice about it will you please. I will endevour to expand on my method(which is probably already common knowledge).

回复收藏 0 原文