Как исправить высоту контента?

Question

[grishaaa]

Как мне сделать чтобы контент плотно прижимался к низу страницы, а не так как сейчас выходит за рамки
v5.master-css.com/Grisha969/Modul/arror.html

Answer 1

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

Если вы хотите управлять высотой всей страницы, включающей 3 блока, то по уму вам нужен общий контейнер для этого. Причем элемент body не подходит.
Но если не перевестывать то что вы натворили можно сделать так:

.content {
min-height: calc(100vh - 483px);
}

При этом необходимо убрать все height которые вы нагородили для блока .content

Это костыль и не кроссбраузерно.

Поэтому оберните .container, .content и footer в общий контейнер, а дальше ваш вопрос решается например flex-блоком или тем же min-height, но для родительского блока.

ps: За адаптивность можно похвалить. )))

Comments

[grishaaa]

Андрей Федоров можете мне в скайпе рассказать как сделать, а то уже голова кипит, не соображаю трезво. Я как-то сделал а оно не пашет. Я вас прошу, мне это очень надо. Мой скайп make.up.man или напишите свой я добавлюсь

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

grishaaa: Вот вам пример codepen.io/aliencash/pen/jqpeqK?editors=1100
Все элементарно.

[grishaaa]

Андрей Федоров: Спасибо вам большое!!! Я забыл контенту добавить flex: 1 0;

[grishaaa]

Андрей Федоров: Добрый день, извиняюсь что беспокою, но появилась проблема тот метод что вы посоветовали для прижатия футера к низу оно в Explorer не работает как сделать чтобы работало v5.master-css.com/Grisha969/Modul/index.html

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

grishaaa: У ie проблемы с flex'ом, факт. Тогда используйте margin, как вам Ivan Bogachev советовал.

[grishaaa]

Андрей Федоров: не выйдет, у его примере есть один минус, если добавить еще шапку с содержимым то контент будет выходить за рамки окна браузера и будет появляться скролл

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

grishaaa: Попробуйте сделать шапку внутри div'а с контентом.

Answer 2

[Ivan Bogachev]

Можно использовать отрицательный margin у нижнего блока.

Comments

[grishaaa]

Ivan Bogachev это всё из-за шапки, по-этому высота контента вылазит за рамки, как мне это исправить, отрицательный марджин для нижнего блока не подходит, увы((((

[Ivan Bogachev]

grishaaa: В качестве грязного решения можно вытащить шапку в position:absolute и марджины заработают: codepen.io/sfi0zy/pen/MyBPjZ?editors=1100

[grishaaa]

Ivan Bogachev: Спс и вам за помощь но мне уже посоветовали лучший способ как решить эту проблему