我有這樣的javascript代碼：DIV - 同一高度的jQuery或CSS

$(document).ready(function() { 
    var leftHeight = $('#maincontent').height(); 
    $('#sidemenu').css({'height':leftHeight}); 
});

這工作，但它是非常有限的。如果我的＃sidemenu正在擴展（例子是因爲子菜單），它在div內變得更大。

我該怎麼做，只要#sidemenu或#maincontent爲這件事，得到更大（身高增加），他們遵循對方。

如果這可以用CSS來完成，我也可以這樣做。

問候。

來源

2012-02-21 oliverbj

如果這是一個佈局，一個CSS的解決方案很可能是更好。 – 472084 2012-02-21 15:39:44

我不認爲你可以附加一個事件到DOM元素來監聽屬性中的變量變化，你必須自己寫這樣的東西。 – Laradda 2012-02-21 15:44:33

任何擁有.css解決方案的人都可以呢？更新了 – oliverbj 2012-02-21 15:45:33

忘記javascript。

把#sidemenu分成#maincontent，給它一個固定的寬度並將它左移。然後將所有內容都包含在#maincontent（但不包括#sidebar）中，稱爲#wrapper（可以說）。給#wrapper一個寬度，它等於#maincontent的寬度減去#sidemenu的寬度並將它浮起。在關閉</div>的#maincontent的前面加上<br style="clear: both" />即可。

現在#maincontent將擴大，以適應sidemenu（如果需要），但在#maincontent內容也不會在自己的包裝的div包裹#sidemenu如果太短下，作爲其。

希望這有助於。

更新

這裏有一個例子：

HTML

<div id="maincontent"> 
    <div id="sidemenu"> 
    <ul> 
     <li><a href="#asd">A Link</a></li> 
     <li><a href="#asd">A Link</a></li> 
     <li><a href="#asd">A Link</a></li> 
     <li><a href="#asd">A Link</a></li> 
     <li><a href="#asd">A Link</a></li> 
    </ul> 
    </div> 

    <div id="wrapper"> 
    This is where your text goes in the main content area of the site. 
    </div> 

    <br style="clear: both" /> 
</div>

CSS

#maincontent { 
    width: 960px; 
} 

#sidemenu { 
    width: 330px; 
    float: left; 
} 

#wrapper { 
    width: 660px; 
    float: left; 
}

來源

2012-02-21 15:46:06

那麼，我應該給一個固定和左浮動。＃sidemenu或#maincontent？ – oliverbj 2012-02-21 15:50:24

我會舉一個例子，給我5分鐘。 – 2012-02-21 15:53:06

我已經發布了一個例子。 :)在我的示例中，#maincontent將是#sidemenu和#wrapper中較高者的高度。 – 2012-02-21 15:57:48

DIV - 同一高度的jQuery或CSS

回答

更新

相關問題