Почему неправильно считается высота страницы свёрстанной на флекс-сетке?

Question

[kiberlain]

запилил вёрстку очередного проекта на сетке с сайта flexboxgrid.com
Всё было норм пока не понадобилось взять высоту всего сайта $('body').height(). Она почему то всё время равнялась высоте окна браузера, хотя реально была более 4000px. Зашёл на flexboxgrid.com — и там тоже самое...
Уже час ломаю голову — почему??

Answer 1

[Денис Инешин]

Скорее всего body у вас не растянут, попробуйте взять высоту внутреннего общего контейнера. Обычно это .main или там .wrapper

Comments

[kiberlain]

у .main тоже высота неправильная i.imgur.com/g6lLFQ0.png

Answer 2

[kiberlain]

всё спасибо за помощь, действительно задавать height 100% для боди было плохой идеей, сделал так

html, body{
    margin:0;
    padding:0;
    height:auto !important;
    min-height:100%;
}

.main {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;*/
    background: #fff;
    font-family: tinos, arial, sans-serif;
}

Comments

[Mastrix 0160]

ну уж если используешь флексбокс то используй как уних min-height: 100vh;
И кстать не пили все префиксы, поставь автопрефиксер с гулпом или грантом или в редакторе на сейв и будет тебе счастье)