Макет полноэкранного режима Bootstrap с высотой 100%

Я хочу разработать киоск-приложение, которое должно растянуться до 100% полного сенсорного экрана.

Когда я вложен для каждого вида/шаблона приложения - строки и столбцы, становится ужасно сложно определить каждую строку и каждый столбец, чтобы установить растяжку на 100% или меньше (в зависимости от вложенного элемента) по высоте.

Есть ли плавающий макет для такого случая?

РЕДАКТИРОВАТЬ

Вот какой код:

<div id="mmenu_screen" class="container-fluid main_container">

    <div class="row">
        <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-12" id="mmenu_screen--book">
                    <!-- Button for booking -->
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12" id="mmenu_screen--information">
                    <!-- Button for information -->
                </div>
            </div>
        </div>
        <div class="col-sm-6 mmenu_screen--direktaction">
            <!-- Button for direktaction -->
        </div>
    </div>

</div>

Вот что я хочу сделать:

+------------------------------+small screen
|-------------+ +------------+ |
||            | |            | |
||            | |            | |
||            | |            | |
||            | |            | |
|-------------+ |            | |
|-------------+ |            | |
||            | |            | |
||            | |            | |
||            | |            | |
||            | |            | |
|-------------+ +------------+ |
+------------------------------+

+----------------------------------------+
|----------------------------------------|huge screen
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
|--------------------|                  ||
|--------------------|                  ||
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
||                  ||                  ||
|----------------------------------------|
+----------------------------------------+

Не что-то вроде этого (макет, который выглядел хорошо на маленьком экране, теперь выглядит коротким)

+----------------------------------+
|                                  |
| +------------------------------+ |
| |--------------|               | |
| +--------------|               | |
| |             ||               | |
| +------------------------------+ |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
+----------------------------------+

Ответ 1

Все, что вам нужно сделать, это иметь высоту 100vh на вашем основном контейнере/обертке, а затем установить высоту 100% или 50% для дочерних элементов.. в зависимости от того, чего вы пытаетесь достичь. Я попытался скопировать ваш макет в основном смысле.

Если вы хотите сосредоточиться внутри, загляните в flexbox. Я привел пример для вас.

Вы можете просмотреть его на весь экран и изменить размер браузера и посмотреть, как он работает. Макет остается прежним.

.left {
  background: grey;  
}

.right {
  background: black;  
}

.main-wrapper {
  height: 100vh;  
}

.section {
  height: 100%;  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.half {
  background: #f9f9f9;
  height: 50%;  
  width: 100%;
  margin: 15px 0;
}

h4 {
  color: white;  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="main-wrapper">
  <div class="section left col-xs-3">
    <div class="half"><h4>Top left</h4></div>
    <div class="half"><h4>Bottom left</h4></div>
  </div>
  <div class="section right col-xs-9">
    <h4>Extra step: center stuff here</h4>
  </div>
</div>

Ответ 2

Вот ответ, используя последнюю версию Bootstrap 4.0.0. Этот макет проще использовать в классах flexbox и sizing, которые представлены в Bootstrap 4. Этот макет возможен с очень небольшим дополнительным CSS.

#mmenu_screen > .row {
    min-height: 100vh;
}

.flex-fill {
    flex:1 1 auto;
}

<div id="mmenu_screen" class="container-fluid main_container d-flex">
    <div class="row flex-fill">
        <div class="col-sm-6 h-100">
            <div class="row h-50">
                <div class="col-sm-12" id="mmenu_screen--book">
                    <!-- Button for booking -->
                    Booking
                </div>
            </div>
            <div class="row h-50">
                <div class="col-sm-12" id="mmenu_screen--information">
                    <!-- Button for information -->
                    Info
                </div>
            </div>
        </div>
        <div class="col-sm-6 mmenu_screen--direktaction flex-fill">
            <!-- Button for direktaction -->
            Action
        </div>
    </div>
</div>

демонстрация

Класс flex-fill будет доступен в Bootstrap 4.1

Ответ 3

Если вертикальная прокрутка отсутствует, вы можете использовать position:absolute и height:100% объявлено на html и элементах тела.

Другой вариант - использовать единицы высоты видовых экранов, см. " Сделать div" на 100% высоты окна браузера

Абсолютное положение Пример:

html, body {
height:100%;
position: absolute;
background-color:red;
}
.button{
  height:50%;
  background-color:white;
}

<div class="button">BUTTON</div>