Почему футер не крепится к низу?

Question

[IninsaY]

Не понимаю в чём проблема:
У подвала стоит
flex: 0 0 auto;
Когда сайт не влазит полностью в экран(картинка 1), то всё норм, но когда наоборот(картинка 2), то появляется лишний фон. С чем это может быть связано?

Answer 1

[Ilya Muromtsev]

Фиксированная высота скорее всего стоит..

Comments

[IninsaY]

я выставил в процентах, но всё равно не исправилось, или нужно, чтобы все разделы были в процентах?

[Ilya Muromtsev]

IninsaY, закиньте код куда нить, дабы глянуть

[IninsaY]

Ilya Muromtsev, https://codepen.io/IninsayY/pen/VwLYYwa

[Ilya Muromtsev]

IninsaY, ну вот у вас сразу же в body стоит высота фиксированная height: 1763px;

[Ilya Muromtsev]

Ilya Muromtsev, далее у вас в футере и абзацы и блоки дивов а вы ему флекс делаете зачем? поэтому всё у вас ломается, сделайте флекс внутри footer-social-networks он у вас уже стоит а в футере уберите, абзацы выровните по центру text-align:center;
в чем проблема

[IninsaY]

Ilya Muromtsev, спасибо) Насчёт высоты, я многое пробовал, изначально (когда всплыла ошибка высота была не фиксированная)

Answer 2

[strelok011]

Вот недавно пример собирал, для другого вопроса на этом сайте https://codepen.io/Strelok011/pen/jOPOqbP

Comments

[IninsaY]

не работает

[strelok011]

Приведите пример кода, как вы это пытаетесь использовать

[IninsaY]

strelok011, https://codepen.io/IninsayY/pen/zYxgdOq

[strelok011]

IninsaY, значится так:
Допишите в стили

body {
	min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
}

И будет вам щасте.

[IninsaY]

strelok011, эх, если бы) Все равно не работает и стили обновил, ничего

[strelok011]

Ну как-же - подвал прибит к низу, миссия выполнена. Синий фон вылезает? или что не так? Синий фон - это фон в main видимо, черных блоков не хватает для заполнения main. Цель назовите, что должно в итоге получиться, и как вы это пытаетесь реализовать. Если хотите тянуть нижний блок - это одно решение, если Вам достаточно блоку main добавить черный фон - другое решение.

[IninsaY]

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

[strelok011]

Промежуток не переместился.
Вы через дев консоль хрома можете увидеть, что блок main занимает все пространство между шапкой и подвалом.
Когда вы откручиваете масштаб - блоки с черным фоном заполняют колодец main по мере своих сил, то бишь раздвигаются содержимым, и заполняют сверху вниз. Это принцип построения страниц в браузере.

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

[IninsaY]

strelok011, не нужно, чтобы блоки растягивались, мне просто нужно убрать пространство между контентом и подвалом

[strelok011]

Нужно увидеть готовую страницу. Если есть возможность разметку содрать из просто скопировать из просмотра исходного кода страницы, прицепить все файлы стилей и вытащить это в песочницу - тогда помогу. Сейчас упираюсь в гадание по хрустальному шару.

Решение прижать футер к низу окна выполнено.
Короткая страница с блоками - будет просвет между блоком и футером. Тут никуда не деться без дополнительных извращений.
Полноценная страница на три экрана - последний блок должен упираться в подвал без просвета.

Если нет какой-то паразитной верстки со стилями, добавляющими отступы и/или имеющими свои значения высоты, которые свешиваются из блоков - никаких просветов не будет.

[IninsaY]

strelok011, окей, сейчас займусь

[IninsaY]

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

[strelok011]

Файлы отдельно не удастся. В песочнице можно пристыковать css и js и связать ссылками

[IninsaY]

strelok011, https://github.com/IninsayY/IninsayY
Я не нашёл другого способа