Question

我有一个页面，标题，一些控件，3个显示数据的表和一个页脚。我希望始终显示标题，控件，页脚和2个表。第3个表我希望它扩展到占用客户端窗口中的可用高度，并在包含div中显示滚动条（该表中的数据有很多行，并且总是需要滚动条）。

我设法找到了a solution（文章中的解决方案2），其功能与Google Chrome和Opera中使用display: table;和display:table-row完全相同。其他浏览器（Firefox，Edge，IE11）中的问题，包含该表的div将拉伸而不能滚动，页脚将被隐藏。

我创建了this fiddle来证明我的问题： https://jsfiddle.net/3nts59oL/5/ 代码：

＆＃13;

body,
html {
  height: 100%;
  padding: 0;
  margin: 0;
}
.container {} .fill {
  height: 100%;
}
.panel {
  display: table;
  width: 100%;
}
.panel > div {
  display: table-row;
  height: 0;
}
.panel > div.fillavailable {
  height: auto;
}
.controls {
  background-color: red;
}
hr {
  background-color: silver;
  margin: 0;
  height: 2px;
}
.content {
  background-color: green;
}
.contentContainer {
  width: 100%;
}
.maincontent {
  background-color: orange;
  overflow-y: scroll;
  height: 100%;
}

＆＃13;

<body>
  <div class="panel fill">
    <div>
      <h1>Title</h1>
    </div>
    <div class="fillavailable">
      <div class="container panel fill">
        <div class="controls">
          Some buttons and links here.
        </div>
        <div class="content fillavailable">
          <div class="panel fill">
            <div>
              <table>
                <tr>
                  <td>Some data(typically 2-3 rows)</td>
                </tr>
                <tr>
                  <td>Some data(typically 2-3 rows)</td>
                </tr>
              </table>
              <table>
                <tr>
                  <td>More data(typically 1-3 rows)</td>
                </tr>
                <tr>
                  <td>More data(typically 1-3 rows)</td>
                </tr>
                <tr>
                  <td>More data(typically 1-3 rows)</td>
                </tr>
              </table>
              <hr />
            </div>
            <div class="fillavailable">

              <div class="maincontent fill">
                <table>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                  <tr>
                    <td>lots of data</td>
                  </tr>
                </table>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <footer>footer text</footer>
    </div>
  </div>
</body>

＆＃13;

绿色表格是固定表格，橙色表格需要根据需要展开以填充可用的屏幕高度。如何修复此代码才能在IE10 +，Firefox中运行？我不太关心IE9或更早版本。我有一个单独的移动版本的页面，但欢迎在移动设备上运行良好的解决方案。

另请注意，我在设计时并不知道任何元素的高度，这就是为什么我没有使用position: absolute或css calc来寻求解决方案。

Answer 1

在此处试试这个：https://jsfiddle.net/7xrbqmba/

看看CSS，你可以玩position:就可以了。

它比您提供的链接更安全，因为如果内容的长度/大小大于容器，它仍然有效。

下次尝试显示一些代码 - 然后更容易确定问题。

Answer 2

这不是一个直接的答案，但使用bootstrap可以大大简化您的问题以及将来出现更多此类问题。您可以根据用户使用的设备修复列和行大小，因为它们具有非常好的网格系统。

http://getbootstrap.com/css/#grid

使div占用可用高度并在IE和Firefox中显示滚动条

2 个答案: