javascript - 使两列高度相同

Question

我试图让两列具有相同的高度但失败了。如何更改我的 CSS 或使用 Jquery？没有 table 请。我有一个要显示的 gridview来自数据库的表。

我的代码:

<div id="wrap">
    <div id="header">
          <h1>TEST</h1>
    </div>
    <div id="sidebar">
        <ul>
                <li>nav1</li>
                <li>nav2</li>
                <li>nav3</li>
                <li>nav4</li>
        </ul>
    </div>
    <div id="gridview">

        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
    </div>
</div> 

CSS:

 #wrap
 {
     width: 800px;
     background-color: #99c;
     overflow: hidden;
 }

 #header
 {
    border-style: solid;
    border-width: 1px;
    background-color: #ddd;
    width: 800px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
  #sidebar
  {
    float: left;
    width: 125px;
    padding-top: 10px;
    background-color: #C0C0C0;
   }
   #gridview
   {
     float: right;
     width: 675px;
   }

我试过人造专栏但没有成功。

Q1:如何修改我的CSS或使用jquery？

Q2:表格宽度很难适应#wrap的宽度(这里是800px)。有什么诀窍吗？感谢代码帮助。

Answer 1

我喜欢用 jQuery 来做这件事

jQuery(document).ready(function() {
    var divone = jQuery("#sidebar").height();
    var divtwo = jQuery("#gridview").height();

    var maxdiv = Math.max(divone, divtwo);

    jQuery("#sidebar").height(maxdiv);
    jQuery("#gridview").height(maxdiv);

});

这基本上是获取两个 div 的高度并获得最大高度，然后为两个 div 分配相同的高度。这对于扩展 div 非常有用