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

StackOverflow https://stackoverflow.com/questions/1610710

  •  05-07-2019
  •  | 
  •  

题

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

有谁知道怎么做？

有帮助吗？

解决方案

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

如果你谷歌'Faux专栏'，你应该得到一些答案。

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

其他提示

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

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

我被这个问题困扰了一段时间，我写了一篇关于这个问题的文章：完成了人造栏。以下是我的观点：

  

基于JavaScript的解决方案   问题并不比其他任何人都差   解。事实上，如果你正在使用   JavaScript，你可以节省几个小时   试图弄清事物的挫败感   工作。人们会警告你反对   通过说＆＃8220;如果会发生什么   用户关闭了JavaScript？＆＃8220;。   相信我，如果用户已关闭   JavaScript，大部分网络都被破坏了   对他来说无论如何。你的侧边栏没有   对他很重要。

正如cballou所提到的，最简单的方法是使用JQuery代码：

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

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

在我的样式表中，

.sidec
{
background-color:#123456;
}

在我的HTML页面中，

<body class="sidec">

content....

</body>

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

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

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

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

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

正如Dal建议的那样，请查看人造栏上的链接。顾名思义，解决方案并不是要修改柱高。相反，它给出了“错觉”。两个列看起来都是相同的高度，实际上它们不是 - 并且使用了背景图像的瓷砖。

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

此致 约拿

由于对这里的新成员态度不佳，我希望这个答案会受到骚扰。 我通过创建一个960px宽1px高的背景图像来解决这个问题，这两种颜色我需要各自宽度的列（780px和180px）。然后我用它作为我的容器的背景图像在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;
}

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

我可能没有很好地解释这个问题，如果是这样的话，请你好好相处。我将努力扩展我的方法（这可能已经是常识）。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top