使用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