2列を同じ高さにします

Question

同じ高さを持つ2つの列を作って失敗しました。 CSSを変更する方法やJqueryを使用する方法は？テーブルはしないでください。私はデータベースからテーブル を表示する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

私は、これは基本的に両方の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に

Answer 2

を拡大するための素晴らしい作品は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> 

（2つのFLOATEDのdivの下で）このlocatiobで

このスパンを追加し、このCSSを使用します。

.clear 
{ 
    display: block; 
    clear: both; 
} 

2つの列が同じ高さになるはずです。

Answer 3

はこれも試してみてください：

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

あなたは、さまざまなHTML要素のために使用することができます！