Html 如何分配未用于图元的所有高度空间

我希望我的表格占据页面上所有剩余的高度，而不是菜单栏分区和滑块容器分区所使用的高度。我是否可以使用flexbox来实现这一点？如果是，怎么做？谢谢

HTML

R-θ
笛卡尔
纵向的
控制台您可以尝试CSS表格布局，为此，我在表格周围添加了一个div

顺便说一下，您有一些标记错误，请在下面修复它们


html，正文，.analysis{
身高：100%；
保证金：0；
}
.分析{
显示：表格；
}
.analysis.menubar，
.analysis.table容器，
.analysis.slider容器{
显示：表格行；
}
.analysis.table容器，
.analysis.table容器表{
身高：100%；
}
.analysis.table容器表{
边框：1px纯红；
}

R-θ
笛卡尔
纵向的
安慰
视图1
x
视图2
x
x


框架




#




您能告诉我们当前和预期输出吗？一个fiddle（）将非常有帮助您正确地标记了CSS，因为这是一个CSS问题，而不是HTML，但是您没有提供任何CSS，我想知道您是一名1150代表！！我尝试使用flexbox，但它似乎不能与table元素一起正常工作。虽然工作正常，但整个设置有点麻烦，所以我决定放弃使用表来放置div容器，然后使用flexbox
<section class="analysis" ng-controller="Analysis">
    <div class="menubar">
        <div class="view-ctrls text-center">
            <div class="btn-group" role="group">
                <button class="btn btn-default" ng-class="{'active-view': active_views[0]}" ng-click="toggleView(0)">R-Theta</button>
                <button class="btn btn-default" ng-class="{'active-view': active_views[1]}" ng-click="toggleView(1)">Cartesian</button>
                <button class="btn btn-default" ng-class="{'active-view': active_views[2]}" ng-click="toggleView(2)">Longitudinal</button>
                <button class="btn btn-default" ng-class="{'active-view': active_views[3]}" ng-click="">Console</button </div>
            </div>
        </div>
        </ul>
    </div>
    <table>
        <tr class="r1">
            <td id="v1">View 1
                <div class="close-btn" ng-click="changeView(0)">x</div>
            </td>
            <td id="v2">View 2
                <div class="close-btn" ng-click="changeView(1)">x</div>
            </td>
        </tr>
        <tr class="r2">
            <td colspan="2" id="v3">
                <div class="close-btn" ng-click="changeView(2)">x</div>
                <ul>
                    <li class="frames-container">
                        Frames
                    </li>
                </ul>
            </td>
        </tr>
    </table>
    <div class="slider-container">
        <ul>
            <li class="frame-num">
                #
            </li>
            <li class="slider">
                <input type="range">
            </li>
        </ul>
    </div>
</section>