Footer вылазит за края, как решить?

Question

artem @arteqrt

Почти не начинающий програмист

Footer вылазит за края, как решить?

При заполнении контентом все налаживается и при уменьшении не вылазит.

Вопрос задан более трёх лет назад
259 просмотров

2 комментария

Подписаться 1 Простой 2 комментария

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 3

5 комментариев

2 комментария

artem @arteqrt Автор вопроса

<div id="wrapper">
		<div id="content">

			<header>
				<div id="logo">
					<a href="adaptive-site-v2.html" title="Главная">
						<img src="img/logo.png">
					</a>
				</div>
				<div id="info">
					<a href="#" title="Форма обратной связи">Поддержка</a>
					<span>|</span>
					<a href="" title="Подробнее о реклама на сайте">Рекламма</a>
				</div>
				<div id="register">
					<a href="#">
						<div class="btn" title="Зарегистрировать новый аккаунт">
							Зарегистрироватся
						</div>
					</a>			
					<a href="#">
						<div class="btn" title="Войти в аккаунт">
							Войти
						</div>
					</a>
				</div>
			</header>
			<nav>
				<div id="ShowMenu"><i class="fas fa-bars"></i></div>
				<div id="HideMenu">
					<a href="#">Фильмы</a>
					<a href="#">Погода</a>
					<a href="#">Сериалы 2020</a>
					<a href="#">Актёры</a>
				</div>
				<div id="katalog">
					<a href="#">Фильмы 2020</a><br>
					<a href="#">Режиссёры</a><br>
					<a href="#">Сериалы 2020</a><br>
					<a href="#">Актёры</a><br>
					<a href="#">Войти</a><br>
					<a href="#">Зарегистрироватся</a>
				</div>
			</nav>

			<!-- Основная часть сайта -->

			<div class="main">
			</div>
			
			<!-- Основная часть сайта Конец-->

		<!-- </div> -->

		<footer>
			<div id="info-footer">
				<a href="#">Поддержка</a>
				<a href="#">О сайте</a>
				<a href="#">На главную</a>
				<a href="#">Войти</a>
				<a href="#">Регистрация</a>
				<a href="#">Реклама</a>
			</div>
			<div id="social">
				<a href="#" target="_blanke" title="Телеграм">
					<i class="fab fa-telegram-plane" id="telegram"></i>
				</a>
				<a href="#" target="_blanke" title="Фейсбук">
					<i class="fab fa-facebook-f" id="facebook"></i>
				</a>
				<a href="#" target="_blanke" title="Инстаграм">
					<i class="fab fa-instagram" id="instagram"></i>
				</a>
			</div>
		</footer >
		</div>
	</div>

* {
	padding: 0px;
	margin: 0px;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	max-width: 1280px;
	margin-right: auto;
	margin-left: auto;
}
html {
	background-color: gray;
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
}



footer {
	width: 99.4%;
	padding: 0.3%;
	border-top: 1px solid #a7a7a7;
	background-color: #85959A;
	padding-top: 12px;
	padding-bottom: 10px;
	font-family: 'Exo 2', sans-serif;
	font-weight: 300;
	display: flex;
	justify-content: space-between;
}

#info-footer {
	display: flex;
	justify-content: flex-start;
	color: white;
 	align-items: center;
 	flex-wrap: wrap;
}
#info-footer>a {
	padding: 10px;
	width: 110px;
	text-align: center;	
	font-size: 1em;
	transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	color: white;
}
#info-footer>a:hover {
	box-shadow: inset 0 0 0 2px white;
	color: #dbdbdb;
}



#social {
	display: flex;
	justify-content: space-between;
	color: white;
	flex-wrap: wrap;
}
#telegram, #facebook {
	font-size: 3em;
	transform: scale(0.8);
	transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	color: white;
}
div#social>a>i:hover {
	transform: scale(1);
	color: #dbdbdb;
}

#instagram {
	font-size: 3em;
	transform: scale(0.8);
	transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	color: white;
}

@media (min-width: 950px) {

	#info-footer {
		margin-left: 1%;
 		width: 83%;
	}

	#social {
		margin-right: 1%;
		margin-left: 0%;
		width: 15%;
	}
}

@media (max-width: 949px) and (min-width: 785px) {

	#info-footer {
		margin-left: 1%;
 		width: 50%;
	}

	#social {
		margin-right: 4%;
		margin-left: 0%;
		width: 35%;
	}
}

@media (max-width: 784px) and (min-width: 525px) {

	#info-footer {
		margin-left: 1%;
 		width: 50%;
	}

	#social {
		margin-right: 9%;
		margin-left: 25%;
		width: 5%;
	}
}

@media (max-width: 524px) {

	#info-footer {
		margin-left: 1%;
 		width: 45%;
	}

	#social {
		margin-right: 24%;
		margin-left: 15%;
		width: 5%;
	}
}

Написано более трёх лет назад

artem @arteqrt Автор вопроса

попробовал завернуть футтер в тег обертку

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+2 ещё

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- 47 минут назад
- 12 просмотров
1

ответ
HTML

+1 ещё

Средний
Как поместить картинку рядом с текстом?
- 1 подписчик
- 3 часа назад
- 35 просмотров
0

ответов
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- 8 часов назад
- 62 просмотра
3

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- 11 часов назад
- 301 просмотр
1

ответ
CSS

Средний
Почему у элемента такое поведение?
- 4 подписчика
- 22 часа назад
- 1634 просмотра
0

ответов
CSS

Простой
Почему не работает transition свойство в scss файле через webpack?
- 1 подписчик
- вчера
- 60 просмотров
2

ответа
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 2 подписчика
- вчера
- 199 просмотров
4

ответа
CSS

Простой
Почему нет задержки между повторами анимации?
- 1 подписчик
- вчера
- 58 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему пустой div смещается, если ему задать margin-bottom?
- 2 подписчика
- вчера
- 180 просмотров
1

ответ
CSS

Простой
Почему не сужается flex-элемент с flex-shrink: 1?
- 1 подписчик
- вчера
- 78 просмотров
0

ответов
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Редизайн корзины аспро. Верстка

23 апр. 2024, в 22:07

12000 руб./за проект

Собрать семантическое ядро + ТЗ копирайтеру для крупного сайта

23 апр. 2024, в 21:40

20000 руб./за проект

Реализовать редирект запросов в Chrome Extension Manifest v3

23 апр. 2024, в 21:14

1000 руб./за проект

Куда двигаться дальше (выучил вёрстку)? по скриншотам капец понятно, что же у тебя там случилось
Ширину указывай 80(или сколько тебе нужно там)% и выровняй по центру

Answer 1 · 2020-07-09 11:38:31

РЕШЕНИЕ!

<body>
    <header>...</header>
    <section class="main-content">...</section>
    <footer>...</footer>
</body>

html{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

header{
   flex: 0 0 auto;
}
.main-content{
   flex: 1 0 auto;
}
footer{
   flex: 0 0 auto;
}

Answer 2 · 2020-07-08 18:25:44

drawnofmymind @drawnofmymind

футер в контейнер

Ответ написан более трёх лет назад

5 комментариев

Answer 3 · 2020-07-08 19:44:43

Первый div скорее всего это обертка которая задает рамки. Подвал, скорее всего туда не поместили.
Если подвал выделили правильно тегом footer просто добавьте класс к нему с названием обертки, или поместите внутрь тега. Или лучше всего покажите, код полностью. Чтобы сказать наверняка.

Answer 4 · 2020-07-08 23:17:53

Сделать можно по такому принципу: https://codepen.io/castlejq/pen/ZEQoeyR

Оберните контент в классы с определенными стилями (размерами).

Если не желаете тратить на это время, можете попробовать bootstrap. И совет Вам, старайтесь в коде не использовать без надобности id="", заменяйте их class="".

Footer вылазит за края, как решить?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт