Javascript 使两列的高度相同

我试图制作两个高度相同的柱子，但失败了。 如何更改我的CSS或使用Jquery？没有桌子了。我有一个网格视图要显示 数据库中的表。

我的代码：

<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> 

我试过人造柱，但运气不好

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

问题2：桌子的宽度很难适应包裹的宽度（这里是800px）。有什么把戏吗？

---

感谢您的代码帮助。

我喜欢使用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非常有效

我喜欢使用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非常有效

您需要的是一个clearfix：

<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>
    <span class="clear!></span>

---

现在两列的高度应该相同。

您需要的是一个clearfix：

<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>
    <span class="clear!></span>

现在两列的高度应该相同。

也可以尝试以下方法：

function sameHeight(el1,el2) {
  var he1 = $(el1).height();
  var he2 = $(el2).height();

  if(he1 > he2){ $(el2).height(he1); };
  if(he1 < he2){ $(el1).height(he2); };
};

sameHeight(yourhtmlelement1,yourhtmlelement2);

功能相同重量（el1、el2）{
var he1=$（el1）.height（）；
var he2=$（el2）.height（）；
如果（he1>he2）{$（el2）.高度（he1）；}；
如果（he1

您可以使用各种html元素

也试试这个：

function sameHeight(el1,el2) {
  var he1 = $(el1).height();
  var he2 = $(el2).height();

  if(he1 > he2){ $(el2).height(he1); };
  if(he1 < he2){ $(el1).height(he2); };
};

sameHeight(yourhtmlelement1,yourhtmlelement2);

功能相同重量（el1、el2）{
var he1=$（el1）.height（）；
var he2=$（el2）.height（）；
如果（he1>he2）{$（el2）.高度（he1）；}；
如果（he1

您可以使用各种html元素

更新至：

#gridview{margin left:125px；}

并在其底部添加

-尝试并返回报告？更新至：

#gridview{margin left:125px；}

并在其底部添加

-尝试并返回报告？是jQuery（document）还是$（document）？@Love-jQuery（document）和$（document）是等价的。$只是jQuery的简写。jQuery（文档）还是$（文档）？@Love-jQuery（文档）和$（文档）是等价物。$只是jQuery的简写。