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＆amp; sidebar）时，在body标签之后并向主体提供onload="absar()"它什么也没做，没什么。

此时，当我设计几乎整个布局时，我无法使用像Faux Columns或桌子等新的解决方案。

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

Answer 2

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

我这样做了：

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

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

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

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

Answer 3

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

我建议您查看this CSS-tricks article。这既具有启发性又彻底。

希望它有所帮助。

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

3 个答案: