jQuery的 - 一個浮動的div設置動態等高

我有2個格容器，左邊一個導航，一個內容的權利是：jQuery的 - 一個浮動的div設置動態等高

#leftnav_static 
{ 
padding:5px; 
margin-top: 5px; 
margin-left: 5px; 
height: 1000px; 
width: 195px; 
font-size: 1.35em; 
float:left; 
background-image: url('pagenav.jpg'); 
} 

#content_dynamic 
{ 
margin-top: 5px; 
margin-left: 215px; 
height: auto; 
width: 700px; 
padding: 5px; 
background-image: url('pagenav.jpg'); 
font-size: 1em; 
line-height:1.6em; 
white-space:nowrap; 
}

現在我想設置leftnav到相同的高度內容（無人造列如果可能的話）：

$('#leftnav_static').height($("#content_dynamic").height());

或

$('#leftnav_static').innerHeight($("#content_dynamic").innerHeight());

不似乎工作。

對此有何建議？

來源

2011-08-26 mildev

你必須明白你正在操縱CSS屬性。

var myHeight = $("#content_dynamic").css("height"); 
$('#leftnav_static').css({"height": myHeight});

應該這樣做。

來源

2011-08-26 11:35:36 ty812

您可以在不設置CSS屬性的情況下設置高度。可能有合理的理由將其設置爲CSS屬性，但我不認爲*在這種情況下是必要的。有沒有特別的理由這樣做？ – mwolfetech

首先，它的工作原理，如果高度已經在CSS中設置，用CSS處理它似乎很自然......除此之外：當你沒有設置html屬性'height'時，我確信（並沒有測試過）沒有設置.height（）值。當沒有設置什麼東西時，你不能把它寫入另一個.height（）（這僅僅是猜測）。 – ty812

如果在CSS中明確設置了高度，我不認爲這很重要 - height（）仍然知道計算的高度 - 也就是說，至少在DOM準備就緒時。如果你的意思是在DOM準備好之前，以及如果你只是將JavaScript包含在html的頭部分，那麼它可能會有所不同。請參閱：http://jsfiddle.net/mwolfetech/FVeVv/1/ – mwolfetech

它確實有效。請參閱jsfiddle。

您是否正在jQuery就緒區塊中運行代碼？另外，如果您想通過瀏覽器「縮放」中的文本大小更改來保持此高度關係，則需要響應調整大小事件。如果在某些時候你讓content_dynamic div的寬度爲auto，那麼當content_dynamic div的高度發生變化（同樣，通過響應調整大小事件）時，還需要調整側邊欄div的大小。

jQuery只允許您附加窗口級別的resize事件，但有插件可以輕鬆地將其轉換爲div級別resize事件。

HTML：

<div id="leftnav_static"></div> 
<div id="content_dynamic">Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit. Etiam iaculis ornare 
    sapien sit amet condimentum. Aliquam a diam vel eros 
    tristique fermentum vitae at turpis. Etiam fringilla, 
    enim nec viverra interdum, metus tortor vehicula mauris, 
    in luctus felis massa ut nulla. Proin et leo vel nunc ornare 
    pulvinar. Vestibulum quis lectus vel arcu tristique aliquet. 
    Fusce malesuada nisi non ante egestas semper. 
    </div>

CSS：

#leftnav_static { 
    padding:5px; 
    margin-top: 5px; 
    margin-left: 5px; 
    height: 1000px; 
    width: 195px; 
    font-size: 1.35em; 
    float:left; 
    background-color: blue; 
} 

#content_dynamic { 
    margin-top: 5px; 
    margin-left: 215px; 
    height: auto; 
    width: 700px; 
    padding: 5px; 
    background-color: red; 
    font-size: 1em; 
    line-height:1.6em; 
    //white-space:nowrap; //This makes the content div only one line, 
          //I commented this out to make the sizing clear. 
}

的JavaScript：（假設jQuery庫已經被加載）

$(function() { 
    $('#leftnav_static').height($("#content_dynamic").height()); 
});

注意：人造列或其他純CSS方法的好處是您不必擔心縮放或調整大小 - 而且您的網站可以爲JavaScript關閉的人員工作。

來源

2011-08-26 11:45:47 mwolfetech

添加顯示塊#leftnav_static

#leftnav_static 
{ 
    display: block; 
}

...這將工作

$(document).ready(function() { 
    $('#leftnav_static').height($('#content_dynamic').height()); 
});

見我的例子; http://jsfiddle.net/D3gTy/

來源

2011-08-26 11:51:18 Stefan

jQuery的 - 一個浮動的div設置動態等高

回答

相關問題