根據浮動元素的高度放置CSS元素

Question

好吧，這很棘手。

首先，此修復程序可以使用JS或CSS，只要起作用即可。

問題是：我有一個帶有float：右側邊欄的站點，而頁腳的位置基於#content的高度。 但是，當#content比側邊欄短時，頁腳會與側邊欄重疊，並且看起來不太好。

我需要什么：一個腳本，該腳本檢測某個元素的高度（在本例中為#sidebar），並修改#content的最小高度以匹配

要么

一個腳本，該腳本檢測#sidebar的HEIGHT並相應地定位頁腳。

有關此版本的實時版本，請訪問http://wizardcm.com/portfolio

對於#content（或頁腳的位置）不使用固定高度的原因是，Tweets的長度永遠不會相同，其他頁面上的側邊小部件也增加了高度。

Answer 1

1.將#sidebar放在#content之前。

2.remove position:absolute from #sidebar 。

3.從#content移除float:left

4.刪除overflow:hidden從#content overflow:hidden 。

Answer 2

我需要什么：一個腳本，該腳本檢測某個元素的高度（在本例中為#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;
}

一切都准備就緒。