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

Question

artem @arteqrt

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

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

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

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

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

+3 ещё

Простой
Как отключить swiper-bundle.min.css?
- 1 подписчик
- 2 часа назад
- 29 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Мулти селект Dropdown. Как можно создать многослойный мулти селект?
- 1 подписчик
- вчера
- 78 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Почему window.scrollTo(0, document.body.scrollHeight); не работает?
- 1 подписчик
- вчера
- 63 просмотра
0

ответов
CSS

Средний
Возможен ли отступ только второй строки CSS clamp?
- 1 подписчик
- вчера
- 71 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- 23 дек.
- 68 просмотров
0

ответов
HTML

+1 ещё

Простой
Как сделать блок такой же формы?
- 1 подписчик
- 23 дек.
- 127 просмотров
1

ответ
HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 23 дек.
- 127 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 22 дек.
- 121 просмотр
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- 22 дек.
- 93 просмотра
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- 21 дек.
- 75 просмотров
1

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

Верстальщик HTML

MST

от 450 $

Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер

BYTIME

от 130 000 ₽

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

Модификация раздела "Табличные знания"

25 дек. 2024, в 20:24

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

Верстка React

25 дек. 2024, в 20:04

1000 руб./в час

Создать ТГ бота для анализа графиков

25 дек. 2024, в 18:09

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

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

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

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

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