Question

好吧，这个很棘手。

首先，这个修复可以在JS或CSS中，只要它有效就没关系。

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

我需要什么：一个脚本，用于检测某个元素的高度（在本例中为#sidebar）并修改#content的最小高度以匹配

OR

一个脚本，用于检测#sidebar的高度并相应地定位页脚。

有关此版的实时版本，请检查http://wizardcm.com/portfolio

不对#content（或页脚的位置）使用固定高度的原因是Tweets的长度永远不会相同，而其他页面则有额外的侧边小部件可以添加到高度。

Answer 1

1.在#sidebar之前输出#content。

2.从position:absolute删除#sidebar。

3.从float:left删除#content。

4.从overflow:hidden删除#content。

Answer 2

我需要的是：一个检测某个元素的高度的脚本（in 这种情况#sidebar）并将#content的最小高度修改为匹配

确保在head标记中链接jQuery ...示例：

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

将以下代码放在其下方的<script>标记内：

$(window).bind("resize", function(){
    var $sideHeight = $("#sidebar").height();
    $("#content").css({minHeight: $sideHeight + 'px'});
}).trigger("resize");

Answer 3

这是您的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;
}

一切都到位。

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

3 个答案: