Как сделать высоту блоков div на всю высоту экрана?

Question

[Имя Имечко]

Как опустить эти блоки в самый низ экрана? Чтобы не было таких белых просветов.

Answer 1

[Сергей Горячев]

https://jsfiddle.net/0cmtgtq6/3/

.wrapper {
  display: flex;
}
.block, .block2 {
  min-height: 100vh;
}

Comments

[Имя Имечко]

Блок не наследует высоту того блока где больше контента https://jsfiddle.net/0cmtgtq6/1/

[Сергей Горячев]

Имя Имечко: А ты об этом и не писал. Тогда решение JS выше.

[Имя Имечко]

Sergey Goryachev: я в js вообще ничего не понимаю =)

[Сергей Горячев]

Имя Имечко: поправил ответ.

[Имя Имечко]

Sergey Goryachev: почему появляется прокрутка? https://jsfiddle.net/0cmtgtq6/4/

[Сергей Горячев]

Имя Имечко: потом что логотип я не учитывал, ибо ты его не показывал. вообще, учись формировать вопросы нормально сразу, чтобы потом 50 раз не переделывать.

[Сергей Горячев]

Имя Имечко: короче, структура у тебя не понятная. покажи макет psd, я тебе накидаю примерно. а то с твоим кодом работать не охота. кривоватенький)

[Имя Имечко]

Sergey Goryachev: i.imgur.com/DyWIlEv.png

[Сергей Горячев]

Имя Имечко: Оно? https://jsfiddle.net/etd8ureL/

[Сергей Горячев]

Имя Имечко: мини-апгрейд https://jsfiddle.net/etd8ureL/1/ , поправил баг с 1 пикселем.

[Сергей Горячев]

Имя Имечко: вообще, для человека без опыта, ты взял сложный шаблон. и учи флексы, пригодится. на таком дизайне точно без них сложней будет.

[Сергей Горячев]

Ergonomic Code: спорить о вреде или пользе флексов я не буду. Для меня является показателем то, что самый крупный европейский фреймворк перешел на флексы, положив болт на IE9 и ниже. Я уверен, что Bootstrap 4 вышел не просто так.

[Сергей Горячев]

Ergonomic Code: И если у бабушки бухгалтера стоит до сих пор Windows XP с IE6, я точно не буду подстраиваться под эту бабушку. Доля IE на российском рынке достаточно низкая, чтобы не париться на счет него.

[Ярослав Иванов]

Ergonomic Code: ну и сидите в своём каменном веке с ie))

[Ярослав Иванов]

Ergonomic Code: я флексом не пользуясь ещё. Пока только флота.

Answer 2

[Дмитрий]

// 100% высота блока на главной
$(window).resize(function(){
  var height = $(window).height();
  $('.class-name').css({'height':height}); 
}).resize();

Comments

[Имя Имечко]

Как и куда это вставлять, ааа )) поясни плз )

[Иван Татауш]

плохая идея на js то что можно сделать на css

[Имя Имечко]

Иван Татауш: как сделать на css?

[Сергей Горячев]

Имя Имечко: https://jsfiddle.net/0cmtgtq6/3/ вот так.

[Имя Имечко]

Sergey Goryachev: почему появляется прокрутка? https://jsfiddle.net/0cmtgtq6/4/

[Иван Татауш]

Имя Имечко: .right добавил min-height: 100vh; а над этим блоком есть header у которого тоже есть определенная высота

[Иван Татауш]

Имя Имечко: тебе нужно сделать хотя бы так min-height: calc(100vh - 60px);

[Имя Имечко]

Иван Татауш: вроде работает, но когда много текста, то меню остается на месте i.imgur.com/GEZBg7S.jpg

[Иван Татауш]

Имя Имечко: это уже концептуальный вопрос, таким способом не решить твою проблему

[Сергей Горячев]

Иван Татауш: всё решается, только структуру переделать надо нахрен всю) calc я не очень люблю, но тут без него не обойтись к сожалению.

[Дмитрий]

Имя Имечко: В хедер или футер, где скрипты

[Иван Татауш]

Sergey Goryachev: то что все решается это однозначно, тут даже говорить нечего =) Я так и написал что нужно менять концепт решения этой задачи)) вот подошло бы решение с помощью display: table и table-cell. Адовая штука но в данном случае он почти идеально подоходит

[Сергей Горячев]

Иван Татауш: https://jsfiddle.net/etd8ureL/1/ я на флексах решил все проблемы)

[Иван Татауш]

Sergey Goryachev: да, флексы тоже хороши для этой задачи)

[Имя Имечко]

Sergey Goryachev: хороший вариант. А как убрать высоту блока PROMO, чтобы прокрутки не было, когда мало текста в правом блоке. https://jsfiddle.net/etd8ureL/2/

[Сергей Горячев]

Имя Имечко:

.rightblock {
  min-height: calc(100vh - 40px);
  padding: 20px 25px;
  box-sizing: padding-box;
}

[Имя Имечко]

Sergey Goryachev: Нц наконец-то это работает! Спасибо большое. Буду теперь разбираться дальше =)

Answer 3

[arti_djeims]

height: 100%;

Comments

[Имя Имечко]

не работает

[Max Medar]

Имя Имечко: все работает. Только сначала нужно освоить самую базу html/css

[Ankhena]

Имя Имечко: не работает, потому что флоаты. А раз флоаты, то нет высоты родителя и %% от него не помогут. Можно приделать overflow, но это тоже может быть чревато последствиями.

Answer 4

[Андрей Федоров]

height: 100vh;
box-sizing: border-box;

Answer 5

[Лариса]

Очень просто )

Comments

[Имя Имечко]

Хороший вариант. А подскажи теперь как сделать, чтобы по умолчанию колонки были прижаты к низу, вне зависимости есть там контент или нет. Если контента мало, то они должны быть прижаты, а если контент, то блоки растягиваются одинаково на всю высоту контента.

Answer 6

[Ankhena]

https://jsfiddle.net/doudxp03/
https://jsfiddle.net/en4q0uzm/

И прочитайте про флексы и забудьте про float для таких ситуаций.

Comments

[Максим]

блин , раньше же не было flexbox а сайты на всю высоту экрана были , да и до сих пор мало какие разработчики перешли на flex но они делают на всю высоту экрана сайты

[Ankhena]

. Shadow: Вы о чем спорите?
Ну да, верстая таблицами это вообще легче легкого реализовывалось.

[Максим]

Ankhena W: я и не спорю ! просто говорю __ флекс не обязателен , но почему то на данный момент все что то на нём сосредоточились __ обычный css table , float , или же inline-block может выполнить любую задачу ,.

[Сергей Горячев]

Ankhena W: https://jsfiddle.net/etd8ureL/1/ сначала пытался мелкой кровью обойтись, просто дав совет, как решить проблему, но потом понял, что проблема стоит глубже в самой структуре, и переделал её нафик для автора) так что согласен с использованием флексов)

[Сергей Горячев]

. Shadow: а еще раньше я помню, сайты вообще без CSS были, о времена, о нравы :)

[Максим]

Sergey Goryachev: ну это перебор уже или не дабор ! обычных прямых рук вполне хватит

[Ankhena]

. Shadow: даже при том, что флексы скажем "сыроваты", работа с ними доставляет мне удовольствие. В отличие от clearfix, overflow и тем более display:table.

[Ankhena]

Sergey Goryachev: Сергей, да, я уже видела, что проблема и в вопросе и в структуре.

[Максим]

Ankhena W: ну однако css table заткнёт за пазуху flexbox и даст ещё форы 100 очей , особенно если это касается стареньких броузеров и IE в частности , к примеру не давно я не верстал а именно лепил шаблон html под wp конкретно для Midori я был в шоке , он не то что бы flexbox он css ни весь знает .. я не противник новинок я просто не люблю не рабочие дизайнерские модели

[Сергей Горячев]

Ankhena W: . Shadow: вообще, меня умиляют споры на счет флексов на тостере) на любой ответ, где есть совет использовать флексы, всегда найдутся советчики делать без него, аргументируя браузером ие свои мысли) честно признаюсь, еще год назад я был таким же) точно также вступал в дискуссии)

[Максим]

Sergey Goryachev: я не спорю, это не спор и не дискуссия , я пользуюсь css table либо float это понимают все броузере , ie меня вообще мало интересуют , я не виндузятник а в линуксе свои говняные броузеры есть

[Ankhena]

. Shadow: слава разработчикам, html и css дают большое пространство решений одной и той же задачи. А если к им еще и js прибавить, так совсем хорошо.

[Максим]

Ankhena W: ваша правда ! вот этим вашим ответом я бы поделился бы в google+ если разрешите ... разумеется

[Ankhena]

. Shadow: мне будет приятно. И разработчикам, думаю, тоже.

[Максим]

Ankhena W: https://plus.google.com/100938281674967046306/post...

Answer 7

[AlexandrKom]

можно display: flex, display: table или float: left.
Flex показывали, float не увидел примера, вот пожалуйста -
codepen.io/AlexanderKom/pen/MbNYGB