コラムの高さを同じにする

Question

私はあなたの助けが必要です。私はフィルタセクションを結果セクションと同じにしたいと思います。しかし、結果と同じようにするのは難しいです。私はまた、記事をEqual Height Columns with Cross-Browser CSS

で読んでいます。以下は私が行ったコードです。高さは結果ペインまたはフィルタペインに依存することに注意してください。

#SearchAll tr td { 
 
     vertical-align: top; 
 
    } 
 
    
 
    #SearchAllPane { 
 
     background: grey; 
 
    } 
 
    
 
    #container1 { 
 
     float: left; 
 
     border: 1px solid; 
 
    } 
 
    
 
    #container2 { 
 
     float: left; 
 
    } 
 
    
 
    #col1 { 
 
     float: left; 
 
     width: 160px; 
 
     background: white; 
 
     padding-left: 10px; 
 
     height: calc(100% - 54px); 
 
    } 
 
    
 
    #col2 { 
 
     float: left; 
 
     width: 20px; 
 
     /*background: grey;*/ 
 
    } 
 
    
 
    #col2 img { 
 
     width: 18px; 
 
     height: 18px; 
 
    } 
 
    
 
    .FilterItem { 
 
     height: 30px; 
 
     line-height: 30px; 
 
    } 
 
    
 
    #ResultTable { 
 
     width: 300px; 
 
     border: 1px solid; 
 
    } 
 
    
 
    .ResultRow { 
 
     height: 30px; 
 
     line-height: 30px; 
 
     background-color: green; 
 
     font-size: 15px; 
 
    }

<table id="SearchAll"> 
 
     <tr> 
 
     <td id="SearchAllPane"> 
 
      <div id="container2"> 
 
      <div id="container1"> 
 
       <div id="col1"> 
 
       <div class="FilterItem"> 
 
        Filter 1 
 
       </div> 
 
       <div class="FilterItem"> 
 
        Filter 1 
 
       </div> 
 
       <div class="FilterItem"> 
 
        Filter 1 
 
       </div> 
 
       </div> 
 
       <div id="col2"> 
 
       <img src="http://uxrepo.com/static/icon-sets/font-awesome/svg/angle-left.svg" /> 
 
       </div> 
 
      </div> 
 
      </div> 
 
    
 
     </td> 
 
     <td> 
 
      <table id="ResultTable"> 
 
      <tr> 
 
       <td class="ResultRow">Results</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="ResultRow">Results</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="ResultRow">Results</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="ResultRow">Results</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="ResultRow">Results</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="ResultRow">Results</td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     </tr> 
 
    </table>

ここで私がやったのリンクです：http://jsfiddle.net/arw5n4qb/

Answer 1

あなたのマークアップは難しく、それをスタイリングするつもりされて、かなり複雑です。ここには簡単なバージョンがあります。重要な部分は、1つのdivに左側のコンテンツが含まれ、1つに右側が含まれ、両方がdisplay: table-cellに設定されていることです（重要な部分は次のとおりです）。親コンテナはdisplay: table;に設定されています。 display: table-cellに設定された兄弟要素は自動的に折り返さずに隣り合って配置されます。彼らはまた、彼らの高さに一致するので、両方の背の高いコンテンツは、背の高いものになります。

フィルタと行を互いに垂直に中央に配置する場合は、兄弟divまたはその親にvertical-align: middleを追加できます。さもなければ、あなたが見ることができるように、彼らは上部に沿ってコンテンツを整列することをデフォルトにしています。

.container { 
 
    display: table; /* important */ 
 
    border: 1px solid gray; 
 
} 
 

 
.filters, 
 
.results { 
 
    display: table-cell; /* also important */ 
 
    width: 200px; 
 
} 
 

 
.filters { 
 
    background: white; 
 
} 
 

 
/* the rest is cosmetic - 
 
* change these styles if needed */ 
 
.filter, .result { 
 
    line-height: 2; 
 
    padding: 0 10px; 
 
} 
 

 
.result { 
 
    background: green; 
 
    color: white; 
 
    border: 1px solid white; 
 
}

<div class="container"> 
 
    <div class="filters"> 
 
    <div class="filter">Filter 1</div> 
 
    <div class="filter">Filter 2</div> 
 
    <div class="filter">Filter 3</div> 
 
    </div> 
 
    <div class="results"> 
 
    <div class="result">Result row</div> 
 
    <div class="result">Result row</div> 
 
    <div class="result">Result row</div> 
 
    <div class="result">Result row</div> 
 
    <div class="result">Result row</div> 
 
    <div class="result">Result row</div> 
 
    <div class="result">Result row</div> 
 
    </div> 
 
</div>