css - 使用 Bulma CSS 列控制 div 高度

问题描述

为了获得响应式页面，我使用了 Bulma CSS 列（基于 CSS flexbox）：

在桌面上的两个等宽列上拆分我的页面。
在移动设备上堆叠两个全宽列。

在左栏中，我使用屏幕全高显示静态地图小部件。

在右列，我想垂直分成两行：

顶行（蓝色），包含少量控件并具有基于内容的动态高度。
底行（红色），包含数据表并具有基于屏幕内剩余空间的动态高度。

整体画面是有一个桌面网页包含在屏幕维度中。

我的问题是关于底行高度：

如果我使用百分比设置固定高度，则行高不是最佳的，具体取决于屏幕（下方可能会保留一小块未使用的空间）。
如果我没有设置固定高度，则该行会从屏幕溢出（而不是在行内添加滚动条）。

此外，我想尽可能避免自定义，也许我可以使用一些 Bulma 开箱即用的布局：英雄，瓷砖，......

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive page</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
  </head>
  <body>
    <div id="app" class="container is-fluid" style="height: 100vh;">
      <div class="columns" style="height: 100%;">
        <div class="column" style="background-color: green;">
          <!-- Fixed full height zone -->
          <div id="map" style="height: 100%;">
        </div>
        <div class="column">
          <!-- Dynamic height zone depending on centent -->
          <div class="container" style="background-color: blue;">
            <p class="buttons is-right">
              <button class="button">Button1</button>
              <button class="button">Button2</button>
            </p>      
          </div>
          <!-- Dynamic height zone depending on remaining space inside the screen -->
          <div class="table-container" style="overflow-y:scroll;" style="background-color: red;">
            <table class="table is-fullwidth">
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
              <tr><td>bla</td></tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

标签： cssflexboxgrid-layoutbulma

css - 使用 Bulma CSS 列控制 div 高度

问题描述

解决方案

推荐阅读