Abs*_*ram 2 html javascript height dynamically-generated
我有一个简单的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标签之后onload="absar()"它提供给body,它什么也没做,什么都没做.
此时,当我设计几乎整个布局时,我不能使用像Faux Columns或table等新的解决方案.
最后一个愚蠢的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;
}
| 归档时间： |
|
| 查看次数： |
3196 次 |
| 最近记录： |