Firefox 中的 CSS 显示类型表行元素高度

Question

我在我的单页应用程序中使用了多个内容 block http://geolytix.com

这是一个示例 block :

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

这些 block 不应高于浏览器窗口的高度。例如，我像这样设置 section_geodata 高度。

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

我将 block 显示为表格，因为我想将内部元素显示为表格行，以便为这些元素使用自动高度。

其他元素的css如下:

#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%;
}

这适用于 Chrome、IE 和 Edge，但不适用于 Firefox。表格行元素未按预期调整大小。

如果有人想实现与其他浏览器兼容的相同布局，那就太好了。

Answer 1

在建议不使用 height:auto 的 .select 容器或 height:0 的表行元素后，我刚刚找到了一个解决方案。

我将 height:auto 更改为 height:100% 用于 .select 容器和 height: 1px 而不是 height: 0 用于表格行。布局和大小现在在不同的浏览器中是相同的。