CSS表示のFirefox

Question

におけるタイプのテーブル行の要素の高さ、私はいくつかのコンテンツブロックを使用http://geolytix.com

は例のブロックです：

<div class="section" id="section_geodata"> 
    <p class="title">Geodata</p> 
    <div class="table-row__spacer"></div> 
    <p class="intro">Where people live...</p> 
    <div class="table-row__spacer"></div> 
    <div class="container"> 

    <div class="select"> 
     <div class="select__inner"> 
     <div class="cursor retail_points selected">Retail Points</div> 
     <div class="cursor retail_places">Retail Places</div> 
     <div class="cursor seamless_locales">Seamless Locales</div> 
     <div class="cursor town_suburbs">Town and Suburb</div> 
     <div class="cursor postal_geom">Postal Geometries</div> 
     <div class="cursor public_transport">Public Transport</div> 
     <div class="cursor road_network">Road Network</div> 
     <div class="cursor uk_admin">UK Admin</div> 
     <div class="cursor education">Education</div> 
     <div class="cursor poi">Points of Interest</div> 
     <div class="cursor pricing">Pricing</div> 
     <div class="cursor faq">FAQ</div> 
     </div> 
    </div> 

    <div class="content map"> 
     <div id="map_geodata"></div> 
    </div> 

    </div> 

</div> 

これらのブロックは、ブラウザよりも高くてはなりませんウィンドウの高さ。私はこのようにsection_geodataの高さを設定します。

#section_geodata { 
    display: table; 
    height: calc(100% - 95px); 
} 

これらの要素に自動高さを使用するために内部要素を表の行として表示したいので、ブロックとしてテーブルを表示します。これは、クローム、IE &エッジで素晴らしい作品が、Firefoxで動作しません

#section_geodata { 
    display: table; 
    height: calc(100% - 95px); 
} 
#section_geodata > .title { 
    display: table-row; 
    height: 0; 
} 
#section_geodata > .table-row__spacer:nth-of-type(1) { 
    display: table-row; 
    height: 30px; 
} 
#section_geodata > .intro { 
    display: table-row; 
    height: 0; 
} 
#section_geodata > .table-row__spacer:nth-of-type(2) { 
    display: table-row; 
    height: 40px; 
} 
#section_geodata > .container { 
    width: 100%; 
    display: table-row; 
    height: auto; 
} 
#section_geodata > .container > .select { 
    position: relative; 
    float: left; 
    width: 300px; 
    height: 100%; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 
#section_geodata > .container > .select > .select__inner { 
    position: absolute; 
    width: 300px; 
    top: 0; 
} 
#section_geodata > .container > .content { 
    position: relative; 
    float: right; 
    width: calc(100% - 300px); 
    height: 100%; 
    display: none; 
} 
#section_geodata > .container > .map { 
    width: calc(100% - 300px); 
} 
#section_geodata > .container > .map > #map_geodata { 
    width: 100%; 
    height: 100%; 
} 

次のように

他の要素のCSSがあります。テーブル行の要素のサイズが期待通りに変更されません。

誰かが他のブラウザで動作する同じレイアウトを実現するアイデアを持っているのなら、それは素晴らしいことです。

Answer 1

高さを使用しないことを提案した後、解決策が見つかりました：.selectコンテナの場合はauto、テーブル行アイテムの場合はheight：0です。

高さの変更：auto：高さの場合：.selectコンテナの場合100％、高さの場合：高さ：テーブル行の場合は1px。レイアウトとサイジングは、異なるブラウザで同じになりました。