如何在HTML / CSS中填充垂直和滚动中间窗格（Chrome可以运行，但Firefox无法运行）

Question

我正在尝试建立一个基本的HTML页面，分为三种方式，顶部和底部窗格应该有固定的修补程序或自动调整大小，中间应该填充其余部分。

我使用position:fixed使它工作一次，但这非常丑陋，而且一旦事情变得更加动态就无法工作。

我终于让它可以在Chrome中使用表格并在中间t​​r中将height:100%为工作状态。 我庆祝了一下，然后尝试了Firefox，但它不起作用。

这是小提琴， https://jsfiddle.net/b1uxcupv/6/

HTML基本上是

<html style="height:100%;width:100%;max-height:100%">
<body style="height:100%;width:100%;">
    <table style="height:100%;width:100%;">
        <tr><td style="height:50px;width:100%;background-color:blue"></td></tr>
        <tr><td style="height:100%;width:100%;background-color:grey">
            <div style="overflow:auto;height:100%">
                blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
                blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
                blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
                blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
            </div>
        </td></tr>
        <tr><td style="height:50px;width:100%;background-color:green"></td></tr>
    </table>
</body>
<html>

我基本上有两种版本，一种是页面应该用中间窗格填充浏览窗口，并占据所有多余的空间并在需要时滚动。

第二个基本相同，但整个内容位于页面内固定大小的div中。 两者都可以在Chrome上运行，但是Firefox不在中间窗格中提供滚动条，它只是忽略max-size并不断填充页面。

Answer 1

这可能是最简单，现代的处理方式。

的HTML

<div class="container">
  <div class="head"></div>
  <div class="mid"></div>
  <div class="foot"></div>
</div>

的CSS

.container {
  display:flex;
  flex-direction:column;
  height:100vh;
  width:100%;
}
.head {
  background:blue;
  min-height:100px;
}
.mid {
  background:#eee;
  overflow:auto;
  flex-grow:1;
}
.foot {
  background:green;
  min-height:100px;
}

Answer 2

好的，我找到了一个解决方案……但是它需要JavaScript，我发现JavaScript需要正确地在Web应用程序中进行布局，CSS确实需要更好地支持动态Web应用程序布局。

这是https://jsfiddle.net/b1uxcupv/15/

<html style="width:100%;height:100%;">
<body style="height:100%;width:100%;padding:0;margin:0">
    <table style="height:100%;width:100%;">
        <tr><td style="height:50px;width:100%;background-color:blue"></td></tr>
        <tr><td style="height:100%;width:100%;background-color:grey">
            <div id="scroller" style="max-height:100px;overflow:auto;height:100%">
                xxblah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
                blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
                blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
                blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
            </div>
        </td></tr>
        <tr><td style="height:50px;width:100%;background-color:green"></td></tr>
    </table>
    <script>
        var scroller = document.getElementById('scroller');
        console.log(scroller);
        console.log(scroller.parentNode);
        console.log(scroller.parentNode.offsetHeight);
        scroller.style.maxHeight = scroller.parentNode.offsetHeight + "px";
        var reset = true;
        window.onresize = function() {
            console.log(scroller.parentNode.offsetHeight - 4);
            scroller.style.maxHeight = "100px";
            if (reset) {
                reset = false;
                setTimeout(function() {
                    reset = true;
                    scroller.style.maxHeight = scroller.parentNode.offsetHeight + "px";
                }, 100);
            }
        };
    </script>
</body>

基本上，我在中间滚动条上将max-height设置为较小的值（100px），然后JavaScript将maxHeight的大小调整为父级的offestHeight，并注册大小调整事件。

也许不是很漂亮，但是可以在Chrome，Firefox，IE和Safari上运行。

我仍然认为必须有一个不需要JavaScript或position：fixed的css解决方案，并且不仅可以在Chrome上运行。 有人知道吗？

感谢提交答案的用户，他们是很好的尝试，但是没有填满窗口，也没有使用静态固定位置。

Answer 3

基于此SO和该SO ，看来<td>不支持overflow属性。 放置一个<div>中的<td>并且还设置了一个固定的高度<td>但高度：100％的<div>得到它为我工作。 具有overflow属性的任何标签应具有固定的高度，或嵌套在具有固定高度的另一个标签内。

这是我在Chrome和Firefox中可以使用的小提琴： https : //jsfiddle.net/rgutierrez1014/b1uxcupv/13/