У меня возникли проблемы с заполнением макета начальной загрузки всей страницы. Это jsbin для того, что у меня сейчас есть: http://jsbin.com/tibusakuci/ редактировать? html, css, вывод
Мне не удается заполнить сеткой всю страницу. Я хочу, чтобы это выглядело так (заполняя весь экран):
На мобильных экранах это выглядит так: 
Есть ли у кого-нибудь идеи, почему мой код не заполняет весь экран, когда я вынимаю минимальную высоту? Используя bootstrap. Использование высоты: 100% тоже не работает.
* В настоящее время поля заполняют только половину экрана
Спасибо!
2 ответа
Удалите отступы с container-fluid и col-*. Вы можете использовать vh для полной высоты и соответственно отрегулировать для высоты 33% на маленьких экранах.
.content {
background: pink;
min-height: 100vh;
}
.sidebar-top{
min-height: 50vh;
background: yellow;
}
.sidebar-bottom{
min-height: 50vh;
background: lightblue;
}
@media (max-width: 768px) {
.content,
.sidebar-top,
.sidebar-bottom {
min-height: 33vh;
}
}
.row.no-gutter {
margin-right:0;
margin-left:0;
}
.row.no-gutter > [class*='col-'],
.container-fluid {
padding-right:0;
padding-left:0;
}
Рабочая демонстрация: http://www.codeply.com/go/r3Rdffxi7A
Удалить отступы и поля окружения, а также удалить отрицательный сдвиг влево и вправо.