Как сверстать 12 блоков во всю высоту экрана мобильного устройства?

Question

[Николай]

Если считать как обычно:

var getBrowserHeight = document.documentElement.clientHeight,
              getSectionHeight = getBrowserHeight / 12,

То снизу получается полоска, я так понимаю это из-за исчезающего снизу сайдбара.
Есть какие-нибудь способы решения сложившийся ситуации? )

Added:
У body задан min-height: 100vh;

Comments

[Kovalsky]

html, body {
  height: 100%;
  width: 100%;
}

* {
  border: 0;
  margin: 0;
  padding: 0;
}

block {
    height: 100%;
}

Или если речь только о блоках, то height: 100vh

[Николай]

Никита Полевой, это шутка?

[Kovalsky]

Николай, во-первых, на вопросы гораздо приятнее отвечать когда есть пример из которого сразу видно о чем речь. Как минимум, наличие живого примера избавляет вас от необходимости постоянно добавлять в вопрос пояснения.

Во-вторых, нет, это не шутка. Я представления не имею о чем там у вас речь, может вы хотите просто 12 блоков и всё, больше никакого контента. Для того и нужен пример. А в остальных случаях 100vh должны спасти.

Опять же - если вас 100vh не спасают, то покажите живой пример, ибо это вообще стандартный ход когда нужна полная высота вьюпорта.

[Николай]

Проект уже готов, вылез неприятный баг. Я не могу целиком вам его скинуть - это займёт много строчек/времени, а по кускам - ещё запутанней

может вы хотите просто 12 блоков и всё

а такое бывает? ) По моему очень логично что они будут наполнены =)

Answer 1

[Николай]

Всё оказалось гораздо проще, надо было body вместо min-height указать height >_<

Answer 2

[Анатолий Жаров]

стоит использовать flexbox

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    align-items: stretch;
}

.block {
    flex-grow: 1;
    flex-shrink: 1;
}

Comments

[Николай]

не подойдёт - специфика проекта :(

Answer 3

[Андрей Котосин]

А что если 100% вместо 100vh попробовать задать для body?
Либо есть еще 1 вариант, пробовать добавлять заранее к высоте, высоту сайдбара:

height: calc(100vh + 60px); 60px - /*примерная высота панели навигации, точно посмотрите сами*/

Comments

[Николай]

Отступ только увеличивается, не помогает =\