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

Question

我有一个简单的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标签之后并向body提供onload="absar()"时它什么也没做，什么也没做。

此时，当我设计几乎整个布局时，我不能使用像Faux Columns或table等新的解决方案。

Answer 1

最后一个愚蠢的CSS技巧工作和完美，....

为我的侧边栏我设置

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

Answer 2

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

我这样做了：

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

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

我做了“101％”的事情，以满足某人可能在高度超过5000px的巨大屏幕上观看网站的可能性（超罕见）！

但是，Absar很棒的答案。 它对我来说很完美。

Answer 3

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

我建议你看看这篇CSS-tricks文章。 它具有启发性和彻底性。

希望能帮助到你。

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

问题描述

3 个解决方案

解决方案1
8 已采纳 2012-12-29 14:23:35

解决方案2
1 2014-02-01 18:33:06

解决方案3
0 2012-12-28 18:49:02

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

问题描述

3 个解决方案

解决方案1 8 已采纳 2012-12-29 14:23:35

解决方案2 1 2014-02-01 18:33:06

解决方案3 0 2012-12-28 18:49:02

解决方案1
8 已采纳 2012-12-29 14:23:35

解决方案2
1 2014-02-01 18:33:06

解决方案3
0 2012-12-28 18:49:02