使用Javascript擴展邊欄高度以等同於內容高度

我有一個簡單的javascript函數，它意在增加我的邊欄div的高度，使其等於內容div的高度。這就是我正在做這個....使用Javascript擴展邊欄高度以等同於內容高度

的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()"身體什麼都不做，什麼都不準確。

在這個時候，當我設計了幾乎整個佈局時，我無法使用像Faux Columns或table等新解決方案。

來源

2012-12-28 AbsarAkram

如果您可以分享鏈接到您的博客，有人可能會看到錯誤控制檯，並建議您修復。 – techfoobar

最後一個愚蠢的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; 
}

來源

2012-12-29 14:23:35 AbsarAkram

這個破解實際上起作用了，容器有溢出：隱藏的甚至可以是一個祖先元素，不僅是等高度列的直接父母 – bluantinoo

我永遠不會爲所有不知道的CSS驚訝。這是一種生活救星。 – yitwail

由於以下幾個原因，這應該通過使用適當的CSS和HTML標記來解決，而不是通過Javascript來解決。主要原因是您的網站邏輯和您的表示層之間的分離。 CSS僅用於可視化佈局，簡單的表示問題應該在CSS域中解決。這似乎是你的問題。我建議你看一下this CSS-tricks article。它既啓發又徹底。

希望它有幫助。

來源

2012-12-28 18:49:02 CarlesAndres

繼@Absar的答案，我可以再補充我的適應？

我這樣做：

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

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

，我做了「101％」的事情，以應付（超罕見的）可能性，有人可能是一個巨大的屏幕上瀏覽的網站，其高度超過5000px！

雖然不錯，但是，Absar。它對我來說非常合適。

來源

2014-02-01 18:33:06

使用Javascript擴展邊欄高度以等同於內容高度

回答

相關問題