Footer / подвал (HTML/CSS). Положение на странице.

Question

Footer / подвал (HTML/CSS). Положение на странице.

Алан Отараев Мыслитель (5516), закрыт 2 недели назад

Доброго дня, Уважаемые Гуру! Просьба ногами по голове не бить, я для себя, для общего развития этим занимаюсь, а не шабашку схватил.
У меня получилось сделать 2 варианта, но оба - "не то пальто".
1) Прилепился к последнему элементу страницы, и получается, что если страница "короткая" - он лезет вверх, не по подвальному себя ведет, в общем-то )))
2) Прилепился к низу страницы, НО может перекрывать часть последних элементов на странице, что не "по православному", ессесно.
Для двух этих вариантов разные описания (main.css и main_test.css) используются - проверял, "что/где/как" работает...
Собственно вопрос, где я накосячил, может кто-то вразумить?
Естественно могу поделиться файлами...
"проект" сайта с обоими вариантами - доступен "из вне".

Answer 1

Доброго дня! Рад помочь вам разобраться с проблемами, связанными с подвалом (footer) на вашей странице. Давайте рассмотрим два основных подхода к созданию подвала и их поведение.

### 1. Подвал, который "прилипает" к низу страницы (Sticky Footer)

Если вы хотите, чтобы подвал всегда оставался внизу страницы, даже если контента недостаточно для заполнения всей высоты окна браузера, вам нужно использовать CSS Flexbox или Grid. Вот пример с использованием Flexbox:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример Sticky Footer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<main>
<h1>Содержимое страницы</h1>
<p>Ваш контент здесь...</p>
</main>
<footer>
<p>Это подвал</p>
</footer>
</div>
</body>
</html>
```

```css
/* styles.css */
html, body {
height: 100%;
margin: 0;
}

.container {
display: flex;
flex-direction: column;
min-height: 100vh; /* Заставляет контейнер занимать минимум 100% высоты окна */
}

main {
flex: 1; /* Это позволяет main занимать оставшееся пространство */
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}
```

### 2. Подвал, который всегда внизу (Fixed Footer)

Если вы хотите, чтобы подвал всегда оставался видимым внизу экрана, даже при прокрутке, вы можете использовать фиксированное позиционирование:

```css
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}
```

### Проблемы, с которыми вы столкнулись:

1. **Прилепился к последнему элементу страницы**: Это происходит, если вы используете обычное позиционирование для подвала, и он не занимает фиксированное место. Используйте подход с Flexbox, чтобы избежать этого.

2. **Перекрытие последних элементов**: Это может произойти, если вы используете фиксированное позиционирование для подвала. Убедитесь, что у вас есть достаточный отступ внизу вашего контента, чтобы избежать перекрытия. Например, добавьте отступ для основного содержимого:

```css
main {
padding-bottom: 60px; /* Высота вашего подвала */
}
```

### Заключение

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

Answer 2

зачем тебе мой подвал, лучше приведи в него своего сына

Answer 3

Попробуй делать свой вариант 2) и задать body стиль padding-bottom:150px;
Имеется в виду, что высота твоего футера 150px;

Answer 4

Выше был верный принцип от нейросети. Вот мой рабочий кусок:

 body { 
	display: flex; 
    flex-direction: column; 
} 
 
html { 
overflow-y: scroll; /* Всегда показываем вертикальную полосу прокрутки	*/ 
} 
 
html, body { 
 
    margin: 0; 
    padding: 0; 
    width: 100%; 
	min-height: 100vh; 
	font-family: 'FontContent', sans-serif; 
} 
 
#content { 
	flex: 1; 
} 
 
 
#footer { 
            text-align: center; 
            padding: 10px 20px; 
            background: rgba(0,0,0); 
			color: rgba(255,255,255); 
 
}

Демо там: https://local-disc.firebaseapp.com/menu/articles/HashRouter.html#/main

Отдельный CSS-файл для подвала ну совершенно не нужен, если это не самостоятельный компонент...

Answer 5

Acap AcapoB Оракул (52449) 2 недели назад

тот, кто не видя кода отвечает, - тот конкретный идиот... или код был? ну тогда это ты некорректно пишешь вопрос.

Алан ОтараевМыслитель (5516) 2 недели назад

1) В Вопросе написал, что код могу предоставить...
2) Те кто отвечают - не идиоты, рекомендации правильные, но из инета, которые я уже тоже видел и пробовал... Спасибо им, хотя бы понимаю, что копаю в правильном направлении.
3) Я считаю, что напрягать людей "Вот мой код, сейчас плохо, сделайте хорошо" - ну как бы не красиво.
Есть желание помочь? Хотелось бы конечно безвозмездно, но я всё понимаю...