Question

上使用了多个内容块

以下是一个示例块：

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

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

其他元素的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和＆amp;边缘但不适用于Firefox。表行元素不会按预期调整大小。

如果有人想要实现与其他浏览器一样的布局，那就太棒了。

Answer 1

我刚刚找到一个解决方案，建议不要使用height：auto表示.select容器，高度：0表示行表项。

我改变了高度：auto为高度：100％用于.select容器，高度：1px而不是height：0用于表行。现在，不同浏览器的布局和大小调整相同。

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

1 个答案: