使用 Javascript 扩展侧边栏高度以等同于内容高度答案

【问题标题】：Extend Sidebar Height to equate Content Height Using Javascript使用 Javascript 扩展侧边栏高度以等同于内容高度
【发布时间】：2014-02-02 02:33:06
【问题描述】：

我有一个简单的 javascript 函数，旨在增加我的侧边栏 div 的高度，使其等于内容 div 的高度。我就是这样做的......

Javascript：

<script type="text/javascript">
function absar(){
document.getElementById("sidebar").style.height = document.getElementById("content").clientHeight;
    }</script>

HTML：

<body onLoad="absar()">
<div id="sidebar" style="border:1px solid red">Few content</div>
<div id="content" style="border:1px solid red">
some content <br>
some content <br>
some content <br>
some content <br>
some content <br>
</div>
</body>

此代码将使侧边栏的高度等于内容 div 的高度。 **好的**

但是，当我将相同的代码粘贴到 wordpress 中（其中我有相同的 id 值 content 和 sidebar）就在 body 标记之后并将 onload="absar()" 提供给 body 时，它什么也不做，完全没有。

目前，当我设计了几乎整个布局时，我无法使用新的解决方案，例如 Faux Columns 或 table 等。

【问题讨论】：

如果您可以分享指向您博客的链接，那么有人可能会查看错误控制台并建议您进行修复。

标签： javascript html height dynamically-generated

【解决方案1】：

最后一个愚蠢的 css 技巧奏效了，而且效果很好，....

为我设置的侧边栏 div

padding-bottom: 5000px;
margin-bottom: -5000px;

对于包含侧边栏和内容 div 的容器。我设置了

overflow: hidden;

而且效果很好 - 就像我想要的那样，请告诉如果你知道这个技巧的任何缺点，...如果我发现了一些，我会在这里发布，

下面是示例代码，

HTML

<div class="main">
<div class="sidebar">Few Sidebar Widgets</div>
<div id="content"> 
Bang Bang Content <br>
Bang Bang Content <br>
Bang Bang Content <br>
</div> <!-- End of Content -->
</div> <!-- End of Main -->

CSS

#main{
overflow:hidden;
}

#sidebar{
padding-bottom: 5000px;
margin-bottom: -5000px;
}

【讨论】：

这个hack确实有效，带有overflow:hidden的容器甚至可以是祖先元素，而不仅仅是等高列的直接父元素
我从未停止对我不知道的所有 css 感到惊讶。这是一个救生员。

【解决方案2】：

除了@Absar 的回答，我可以添加我的改编吗？

我这样做了：

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -101%;
  padding-bottom: 101%; 
  .... 
}

我做了“101%”的事情是为了迎合（极其罕见的）有人可能在高度超过 5000 像素的大屏幕上查看网站的可能性！

虽然答案很好，Absar。它对我来说非常有效。

【讨论】：

【解决方案3】：

出于多种原因，这应该通过使用适当的 CSS 和 HTML 标记来解决，而不是通过 Javascript。主要原因是您的站点逻辑和表示层之间的分离。 CSS只是用于视觉布局，简单的呈现问题应该在CSS域中解决。您的问题似乎就是这种情况。

我建议你看看this CSS-tricks article。它既启发性又透彻。

希望对你有帮助。

【讨论】：