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

Question

artem @arteqrt

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

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

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

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

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 Автор вопроса

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

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

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

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

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

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

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

JavaScript

+1 ещё

Средний
Как правильно сделать переключение темы?
- 1 подписчик
- 2 часа назад
- 59 просмотров
2

ответа
HTML

+3 ещё

Простой
Почему третья карточка не становиться в ряд?
- 1 подписчик
- 19 часов назад
- 141 просмотр
1

ответ
HTML

+1 ещё

Простой
Как добиться срабатывания transition для checkbox?
- 1 подписчик
- 02 нояб.
- 73 просмотра
2

ответа
CSS

Простой
Как сделать общий градиент для двух блоков?
- 1 подписчик
- 02 нояб.
- 95 просмотров
1

ответ
HTML

Простой
Как преобразовать HTML в exe?
- 2 подписчика
- 02 нояб.
- 323 просмотра
4

ответа
HTML

+1 ещё

Простой
Как сделать Second Picker?
- 1 подписчик
- 02 нояб.
- 101 просмотр
2

ответа
HTML

Простой
Чем и как вы тестируете WAI-ARIA?
- 1 подписчик
- 01 нояб.
- 58 просмотров
0

ответов
HTML

+1 ещё

Простой
Как исправить эффект при наведении?
- 1 подписчик
- 01 нояб.
- 106 просмотров
0

ответов
HTML

Простой
Чему равна высота и ширина элемента .content в следующем коде?
- 1 подписчик
- 31 окт.
- 48 просмотров
0

ответов
CSS

Простой
Как сверстать нестандартный грид блок?
- 1 подписчик
- 30 окт.
- 125 просмотров
2

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Frontend Developer

Wanted. • Санкт-Петербург

До 180 000 ₽

Разработать колесо фортуны

05 нояб. 2024, в 10:42

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

Wordpress портал с плагином Tutor LMS

05 нояб. 2024, в 10:41

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

GUI на python для отображения из PostgreSQL на карту местности

05 нояб. 2024, в 10:36

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

Куда двигаться дальше (выучил вёрстку)? по скриншотам капец понятно, что же у тебя там случилось
Ширину указывай 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 вылазит за края, как решить?

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

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

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