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

Question

我希望我的表占据菜单div和滑块容器div未使用的页面上的所有剩余高度。我会使用flexbox来实现这一目标吗？如果是这样的话？感谢。

HTML

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

Answer 1

您可以尝试CSS表格布局，为此，我在表格周围添加了一个div。

顺便说一句，你有一些标记错误，将它们修复如下。

html, body, .analysis {
  height: 100%;
  margin: 0;
}
.analysis {
  display: table;
}
.analysis .menubar,
.analysis .table-container,
.analysis .slider-container {
  display: table-row;
}
.analysis .table-container,
.analysis .table-container table {
  height: 100%;
}
.analysis .table-container table {
  border: 1px solid red;
}

<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>
  <div class="table-container">
    <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>
  <div class="slider-container">
    <ul>
      <li class="frame-num">
        #
      </li>
      <li class="slider">
        <input type="range">
      </li>
    </ul>
  </div>
</section>