Javascript 根据浮动元素的高度定位CSS元素

好吧，这个很棘手

首先，这个补丁可以是JS或CSS，只要它能工作就行

问题是： 我有一个带有浮动的站点：右侧边栏，页脚的位置基于#内容的高度。但是，当#内容比侧边栏短时，页脚与侧边栏重叠，看起来不太好

我需要的是： 一种脚本，用于检测某个元素的高度（在本例中为#侧栏），并修改#内容的最小高度以进行匹配

或

检测#侧边栏高度并相应定位页脚的脚本

有关此的实时版本，请选中

不为#内容（或页脚位置）使用固定高度的原因是推文的长度永远不会相同，而其他页面有额外的边栏小部件来增加高度

我需要的是：一个脚本，用于检测某个元素的高度（在 本例为#侧栏），并将#内容的最小高度修改为 匹配

确保在

标题中链接jQuery

标记。。。例如：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

1.将您的

#侧边栏

放在

#内容

之前

2.从

#侧栏中删除
位置：绝对



3.从
#content
中删除
float:left



4.删除
溢出：从
#content
中隐藏
。这是css布局的问题，您不需要JavaScript解决方案。您的侧边栏上有浮动和绝对定位，这将使其脱离页面流

你的课程应该是：

#content {
    float: left;
    margin: 0;
    min-height: 300px;
    overflow: hidden;
    position: relative;
    width: 770px;
}

#sidebar {
    float: right;
    font-size: 10pt;
    margin: 10px 0 0;
    padding: 0 0 10px;
    right: 40px;
    width: 300px;
}

#content .page, #content .post {
    padding: 10px 15px !important;
}

然后一切都安排妥当。
我真的不觉得有什么问题，只是在加载时调整大小还是调整大小？@stefandenschev我找不到这样做的脚本，而且我不擅长JS。有一个链接？这个社区的要点是学习和变得更好的编程，而不是复制/粘贴代码片段，如果下面的任何答案帮助解决了你的问题或者你认为他们回答你的问题，你应该考虑标记其中之一（不幸的是不能做更多：P）作为答案。然而，在没有外部帮助的情况下，为了使其正常工作，进行了大量的测试和故障排除。在经历了很多的胡闹、请朋友修补和谷歌搜索之后，我决定我最终需要一个以快速、有用的建议和修复而闻名的社区的帮助——这正是我所得到的。有时候，你只需要一个外部透视图来修复你忽略的东西。只是尝试了一下，在Chrome的开发工具（控制台）未捕获的TypeError:object[object Window]的属性“$”不是一个函数组合：65（匿名函数）公文包：应用程序配置不允许使用给定URL。示例：应用程序的设置不允许使用一个或多个给定URL。它必须与网站URL或画布URL匹配，或者域必须是应用程序域之一的子域。页面上是否链接了jQuery？更新答案，您必须首先在头部加载jQuery。可能会有帮助：嗯，我确信我已经运行了jQuery。。也许那只是在主页上。我将不得不更多地使用jQuery，因为它在过去很有用。不过，谢谢你，这确实有助于加深我的理解。你不会相信我花了多少时间在试图让元素正确对齐上。即使有一位朋友查看了代码，也需要多次修改才能使代码接近我想要的效果。在某一点上，我们甚至有一个纯白的“sidebarback”10000px高的元素来尝试纠正它。我最终解决了这个问题，但仍然不完美。感谢这段代码，我将首先测试您的代码，因为@rishabhgoel需要与WordPress PHP打交道，我已经做得够多了。在有机会回顾您的建议并在Chrome中进行测试后，它满足了您提出的问题，但失去了内容的流畅配置。再次感谢您的建议，但我将使用@rishabhgoel的版本，如下所示，使用我想要的流体设计。在以前的尝试中，我曾尝试在内容之前使用侧边栏，但我尝试的所有操作都以顶部侧边栏和下面的内容结束。CSS有时会非常复杂。感谢您直接、简单、切中要害的回复。如果@keeg的代码不能正常工作，我会试试你的。我只是讨厌在WordPress的PHP.fixed width和float:left中正确使用边栏。这将导致你的边栏在较小的窗口中跳转。好吧，经过一些（非常快速）的测试，你的建议完全符合我的需要。现在已经实施。再次感谢您的帮助。很高兴，我能帮忙：）
#content {
    float: left;
    margin: 0;
    min-height: 300px;
    overflow: hidden;
    position: relative;
    width: 770px;
}

#sidebar {
    float: right;
    font-size: 10pt;
    margin: 10px 0 0;
    padding: 0 0 10px;
    right: 40px;
    width: 300px;
}

#content .page, #content .post {
    padding: 10px 15px !important;
}