Управление высотой div с помощью колонки Bulma CSS - PullRequest
Новая
       50

Управление высотой div с помощью колонки Bulma CSS

1 голос
/ 25 октября 2019

Чтобы получить отзывчивую страницу, я использую колонку Bulma CSS (на основе CSS flexbox), которая:

  • Разделить мою страницу на два столбца равной ширины на рабочем столе.
  • Сложите два столбца полной ширины на мобильном устройстве.

В левом столбце я, кроме отображения виджета статической карты, использую экран в полный рост.

В правом столбцеЯ хочу разбить по вертикали на две строки:

  • Верхняя строка (синим цветом), содержащая несколько элементов управления и имеющая динамическую высоту в зависимости от содержимого.
  • Нижняя строка (красным цветом)), содержащая таблицу данных и имеющую динамическую высоту на основе оставшегося пространства внутри экрана.

Общая картина состоит в том, чтобы иметь веб-страницу рабочего стола, содержащуюся в измерении экрана.

Myпроблема, связанная с высотой нижней строки:

  • Если я установил фиксированную высоту в процентах, высота строки не является оптимальной в зависимости от экрана (под ней может остаться небольшое неиспользуемое пространство).
  • если я не установилфиксированная высота, строка переполняется с экрана (вместо добавления полосы прокрутки внутри строки).

Также я хочу, насколько это возможно, избежать настройки, и, возможно, я мог бы использовать некоторыеБулма из коробки: герой, плитка, ... 

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