Установите высоту строки Bootstrap на высоту заполнения, но также ограничьте ее высотой контейнера - PullRequest
Новая
       222

Установите высоту строки Bootstrap на высоту заполнения, но также ограничьте ее высотой контейнера

0 голосов
/ 07 августа 2020

Наверное простой вопрос .. Тара у меня есть. В этом контейнере есть X строк. Ряды должны полностью заполнить емкость по высоте. Строки не должны выходить за пределы контейнера. Я не хочу вручную устанавливать высоту строк.

Если я установил class="h-100" для строк, первый займет всю высоту контейнера, а остальные будут отображаться за пределами контейнера .. Я бы подумал, что родительская высота установит ограничение по высоте для внутренних элементов ...

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

<html lang="en" style="
    height: 100%;
"><head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  </head>
  <body style="height: 100%;">
    <div class="container-fluid h-100">
      <div class="row">row 1</div>
      <div class="row">row 2</div>
    </div>
  </body>
</html>

1 Ответ

0 голосов
/ 07 августа 2020

Для справки, это самое чистое решение, которое я нашел. Кажется, это особенность flexbox (класс d-flex), чтобы разделить доступное пространство, используя flex-fill.

Но по умолчанию он будет делиться доступным width. Установка flex-column изменяет направление так, чтобы оно было доступно height. 

<html lang="en" style="
    height: 100%;
"><head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body style="
    height: 100%;
">
<div class="container-fluid h-100 d-flex flex-column">
    
  <div class="flex-fill">
      ROW 1 
  </div>

  <div class="flex-fill">
      ROW 2 
  </div>

  <div class="flex-fill">
      ROW 3 
  </div>

</div>
  
</body></html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...