Question

我有以下简单的脚本

<div id="content">
   <div id="left">
    <div id="menu">
     <ul>
      <li>menu</li>
     </ul>
    </div>
    <div id="left_ad">
    </div>
   </div>
   <div id="middle">
    some text here...
   </div>
   <div id="right">
    <div id="right_ad">
     <div id="ad2">
     </div>
    </div>
   </div>
  </div>

的CSS：

#content
{

 margin: 0;
 padding: 0;
 overflow: hidden;
 position: relative;

}
#left
{
 float: left;
 width:25%;
 margin-left:0;
 margin-right:0;
 margin-top:0;
 margin-bottom:-5000px;
 padding-left:0;
 padding-right:0;
 padding-top:0;
 padding-bottom:5000px;

}
#middle
{
 background-image:url("http://localhost/kino/img/theme.png");
 background-repeat:no-repeat;
 float: left;
 width:50%;
 margin-left:0;
 margin-right:0;
 margin-top:0;
 margin-bottom:-5000px;
 padding-left:0;
 padding-right:0;
 padding-top:0;
 padding-bottom:5000px;
}
#right
{
 float: left;
 width:25%;
 margin-left:0;
 margin-right:-1px;
 margin-top:0;
 margin-bottom:-5000px;
 padding-left:0;
 padding-right:0;
 padding-top:0;
 padding-bottom:5000px;
}
#left_ad
{
 background-image:url("http://localhost/kino/img/lens1.png");
 background-repeat:no-repeat;
 min-height:498px;
 margin-left: auto;
 margin-right: auto;
 margin-top:31px;
 padding:0;
 width: 188px;
 position: relative;
 height: 100%;
}

如您所见，左，中和右具有相同的高度，等于它们的最大值。现在，问题是什么，我希望 left_ad 也有同样的高度。如何设置 left_id 的高度等于left？感谢

Answer 1

left_ad height设置为100％，这意味着它从父div继承其高度。你需要为左div设置一个高度。

Answer 2

添加

height:600px; /*or whatever you want*/

到你的left { div CSS。

Answer 3

使用此脚本 http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

将div的高度设置为等于包含div

的CSS：

3 个答案: