我有这样的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

回答

更新

相关问题