Таблица с полной высотой с содержимым

user2279379 спросил: 11 июня 2018 в 10:03 в: html

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

Проблема в том, что если у пользователя действительно малое устройство, тогда данные на стороне езды выходят из контейнера (серая область), который выглядит уродливым. Есть ли какой-либо вариант, чтобы моя сторона езды не выходила за пределы серой области?

Обратите внимание, что мой контейнер должен быть динамически 100% высоты, чтобы покрыть всю страницу. Im ищет решение, которое не использует javascripts.

<div class="container">
  <div class="row my-row">
    <div class="col-sm-6 my-col col-1">
      <div class="my-table">
        <div class="my-table-wrapper">
          <div class="my-table-wrapper-2">
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 my-col col-2">
      <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2<br>2 of 2<br>    </div>
  </div>
</div>

Fiddle

(Работает только с хромом, не уверен, почему)

0 ответов