Макет полноэкранного режима 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>
