2

我有一个简单的 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 等。

4

3 回答 3

8

最后，一个愚蠢的 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-29T14:23:35.710 回答
1

除了@Absar 的回答，我可以添加我的改编吗？

我这样做了：

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

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

我做了“101%”的事情是为了迎合（极其罕见的）可能有人在一个高度超过 5000 像素的大屏幕上查看该网站的可能性！

不过，Absar 的回答很好。它对我来说非常有效。

于 2014-02-01T18:33:06.840 回答
0

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

我建议你看看这篇 CSS-tricks 文章。它既具有启发性又透彻。

希望能帮助到你。

于 2012-12-28T18:49:02.040 回答