使用Javascript扩展侧边栏高度，使其与内容高度相等

Extend Sidebar Height to equate Content Height Using Javascript

本文关键字：高度 Javascript 扩展 侧边栏 使用      更新时间：2023-09-26

我有一个简单的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的高度。** OK**

但是当我粘贴相同的代码在wordpress(我有相同的id值content &sidebar)就在body标签之后，并将onload="absar()"提供给body它什么也不做，确切地说什么也不做。

在这一点上，当我几乎设计了整个布局，我不能使用新的解决方案，如假列或表格等。

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

对于我的侧边栏div，我设置

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

和包含侧边栏和内容div的容器。我把

overflow: hidden;

和它完美地工作-就像我想要的方式，请告诉如果你知道这个技巧的任何缺点，…如果我找到了，我会贴在这里的，

下面是示例代码，

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

关于@Absar的回答，我可以添加我的改编吗?

我这样做了:

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

我做了"101%"的事情，以满足(极其罕见的)可能性，有人可能会在一个高度超过5000px的大屏幕上查看网站!

答得好，abar。

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

我建议你看看这篇css技巧的文章。它既具有启发性又彻底。

希望能有所帮助。

相关文章：