Menu
I've a simple javascript function which is meant to increase my sidebar div's height to make it equal to the height of the content div. this is how I am doing this....
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>
This code will make the height of sidebar equal to the height of content div. ** OK**
But when I paste same code in wordpress(where I've same id values content & sidebar) just after the body tag and provide onload="absar()" to body it does nothing, exactly nothing.
At this point when I've designed almost whole layout I can't go with a new solution like Faux Columns or table etc. .
567
asked Sep 23 '26 16:09
At last a stupid css trick worked and worked perfectly,....
for my sidebar div I set
padding-bottom: 5000px;
margin-bottom: -5000px;
and for the container which contained sidebar and content divs. I set
overflow: hidden;
and it worked perfectly - Just like the way I wanted, Please tell If you know any drawbacks of this trick,... I'll be posting here if I found some,
Below is the example code,
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With