Как сделать высоту секции в зависимости от высоты клиентской области браузера?

Question

[Иван Желудков]

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

Answer 1

[Андрей Чернышев]

А такой вариант без js вам не подойдет ?
http://codepen.io/delch/pen/FndbG

Comments

[Иван Желудков]

Офигеть?! О таком я подумать не мог. То есть этот метод не несёт за собой никаких подводных камней и побочных эффектов? Я даже не знал, что так можно сделать. Меня напрягает лишь параметр Height у .content. Что с ним делать, если блоков 7, например.

[Андрей Чернышев]

Вот это я бы и мог назвать подводным камнем. Если блоков сеть то wrapper = 100 * 7, а каждый контент будет равен 100 / 7 = 14.285714285714286. Для четного кол-ва блоков это несомненно удобно, для нечетных возникают трудности.

[Иван Желудков]

Как вариант создать Javascript код, который будет решать эту проблему можно? Для шести блоков кстати тоже не вариант, так что не только нечётные.

[Андрей Чернышев]

Ну в любом случае можно еще и так сделать http://codepen.io/delch/pen/dALhB

[Иван Желудков]

Ооо, спасибо. Мне тут выше подсказали, что проблему можно решить прописав section { min-height: 100vh }. Скоро буду разбираться насколько это кроссбраузерно и работает ли вообще.

[Андрей Чернышев]

viewport Height не особо кроссбраузерно) http://caniuse.com/#search=vh

Answer 2

[Jonh Doe]

http://api.jquery.com/height/

или

var winH=0; var winW=0;
if (document.body && document.body.offsetWidth) {
 winW = document.body.offsetWidth;
 winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) {
 winW = document.documentElement.offsetWidth;
 winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
 winW = window.innerWidth;
 winH = window.innerHeight;
}
console.log(winH+'x'+winW);

Comments

[Иван Желудков]

К сожалению я не знаю JS и английский у меня не настолько хорош. Но за ссылку спасибо, теперь знаю что jQuery может с этим помочь.

[Иван Желудков]

Как я понял с помощью jQuery это делается очень просто. Не мог быть кто нибудь продемонстрировать как с его помощью можно сделать параметр height определённого div сделать по высоте клиентской области?

[Иван Желудков]

Как в указанном в вами коде указать нужны класс или айди, к которому нужно применить высоту?

Answer 3

[Александр Кит]

Как вариант:
viewport units
body > section { min-height: 100vh }

Comments

[Иван Желудков]

Я знаю про этот вариант, но он неудобен тем, что надо подбирать под каждый экран значения.

[Александр Кит]

Что простите? `100vh` - это полная высота view-porta независима от экрана.

[Иван Желудков]

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

[Александр Кит]

Нет конечно, 100vh - где 1vh, это 1% от высоты вью порта. Такое решение проблемы самое лёгкое и оптимальное, но к сожалению только для IE9+. <a href='http://jsfiddle.net/mdnw6/'>jsfiddle</a>

[Иван Желудков]

То, что для IE9, это нормально. Конечно не идеально, но всё же лучшее решение. Огромное спасибо. Это лучший вариант, я полагаю. Но позже протестирую.

[Иван Желудков]

А ссылки тут в комментариях, как я понял не работают. Может проблема в ваших ковычках. <a href="http://jsfiddle.net/mdnw6/">jsfiddle</a>

[Иван Желудков]

А обязательно использование min-height? Или это для того, чтобы если материал будет больше, то и размер секции увеличится?

[Александр Кит]

@webvany <i>Наверное тэги не работают</i> да, min-height на случай если материала будет больше чем высота браузера.

[Иван Желудков]

Не понимаю почему, но у меня на codepen.io (http://codepen.io/Vany/pen/jdJGs) не получается так же сделать. Но на том же jsfiddle.net при создании такого же файла всё работает. Не понимаю в чём может быть проблема.

[Иван Желудков]

Тем не менее в браузере всё отображается нормально, видимо это баг codepen. Спасибо за помощь. Я укажу вас в статье, когда буду писать статью об возможных решениях. Можете даже дать ссылку на личный сайт или страницу, на которую сослаться. По стандарту на этот профиль.

[Александр Кит]

@webvany Смотрю, у код-пэна там двойная вложенность `айфрэймове` и похоже они как-то хитро ещё управляют их выстой, что проявляется какой-то баг браузера... после изменения размеров бразуера все встает на свои места.

[Иван Желудков]

Да да, я так и понял. Ещё я понял, что есть тут один баг, что когда пишешь человеку и указываешь на него ссылку. То приходится отдельно просматривать и само сообщение, как комментарий и оповещение о указании "меня" в каком-то комментарии. Сейчас увидишь. @tenbits

[Александр Кит]

Да, просто здесь как-то бажно приходят уведомления о новых комментариях, а вот прямое @webvany упоминание, это "bulletproof" метод ;)

[Иван Желудков]

пробовал вручную упомянуть пользователя. Не отобразилось как ссылка, соответственно и оповещение не пришло. Вот так @tenbits

[Иван Желудков]

Наверное не отобразилось, потому что писал не в комментариях, а в ответ на вопрос.

[Александр Кит]

_Да, всё хорошо .. )_