0

好吧，这个很棘手。

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

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

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

或者

检测#sidebar 的高度并相应定位页脚的脚本。

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

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

4

3 回答 3

1

1.把你的#sidebar之前#content。

2.position:absolute从中删除#sidebar。

3.float:left从中删除#content。

4.overflow:hidden从中删除#content。

于 2013-09-10T02:27:36.263 回答
0

我需要的：一个检测某个元素的高度（在本例中为#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");
于 2013-09-10T02:23:45.357 回答
0

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

一切都到位了。

于 2013-09-10T02:43:39.523 回答