Как убрать пустое пространство под footer'ом?

Question

iadarch @iadarch

HTML
CSS

Как убрать пустое пространство под footer'ом?

При разработке страницы сайта после footer идет пустое пространство. Я новичок, не совсем поняла, как от него избавиться, не могли бы вы помочь?

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

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

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

Anonymous Penguin @Anopeng

Откуда мы знаем? Причин может быть много. Скинь разметку и стили, чтобы точно понимать проблему

Написано более двух лет назад

iadarch @iadarch Автор вопроса

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Seon</title>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;400&family=Marcellus&family=Montserrat:ital,wght@0,100;1,400;1,500;1,600&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>

	<header id="header" class="header">
		<div class="container">
			<img src="img/logo.png" alt="logo" class="logo">
			<ul class="menu">
					<li>
						<a href="index.html">
							Главная
						</a>
					</li>
					<li>
						<a href="about.html">
							О нас
						</a>
					</li>
					<li>
						<a href="products.html">
							Товары
						</a>
					</li>
					<li>
						<a href="services.html">
							Услуги
						</a>
					</li>
			</ul>
			<div class="cont">
			<img src="img/Group 10.png" alt="img1" class="img1">
			<h1>Мастерская, занимающаяся искусством и художественным ремеслом.</h1>
			<h2>Бизнес-идея зародилась  осенью 2021, и уже сейчас ателье Seon активно развивает свою деятельность.</h2>
        </div>
		</div>
	</header>

    <section id="about" class="about">
		<div class="container">
			<img src="img/Group12.png" alt="go" class="go">
			<h3>Плюсы:</h3>
			<ul class="shift">
                <li>расположение в центре города</li>
                <li>стабильная цена на продукцию и услуги </li>
                <li>качество и комфорт </li>
                <li>акции и подарки </li>
            </ul>
            <h4>Минусы:</h4>
            <ul class="ever">
                <li>Попробуй найти, от нас скидка 30% на всю продукцию Seon :)</li>
            </ul>
		</div>
	</section>
    
	<footer id="footer" class="footer">
		<div class="container">
			<div class="footer-text">
				<p>
					©2021-2022 Atelier Seon 
				</p>
				<p>
					Все права защищены
				</p>
			</div>
		</div>
	</footer>
</body>
</html>

Написано более двух лет назад

iadarch @iadarch Автор вопроса

Anonymous Penguin,

body {
	padding: 0;
	margin: 0;
	font-family: 'Inter', sans-serif;
	color: black;
	font-size: 16px;
}

* {
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
}

section {
	padding-top: 113px;	
}

p {
	margin: 0;
}

ul, li {
	padding: 0;
	margin: 0;
}

.container {
	width: 1170px;
	/*позиционирование по центру*/
	margin: 0 auto; 
}


header a {
	color: #fff;
}

.logo {
   width: 142px;
   height: 151px;
   left: 318px;
   top: 158px;
   margin-top: 95px;
   margin-bottom: 7px;
}

.menu {
   position: relative;
   width: 750px;
   height: 58px;
   left: 416px;
   top: -117px;
}

.menu li a {
	font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-size: 36px;
   line-height: 44px;

   color: #000000;
}

.menu {
	display: flex;
}

.menu li {
	margin-right: 62px;
	display: block;
}

h1 {
	position: relative;
	width: 561px;
   height: 132px;
   left: 31px;
   top: -737px;
}

h1 {
	font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-size: 36px;
   line-height: 44px;
   text-align: justify;
   text-indent: 54px;

   color: #000000;
}

h2 {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-size: 36px;
   line-height: 44px;
   text-align: justify;
   text-indent: 54px;

   color: #000000
}

h2 {
	position: relative;
   width: 561px;
   height: 186px;
   left: 620px;
   top: -348px;
}

h3 {
	position: relative;
	width: 631px;
   height: 270px;
   left: 20px;
   top: -1209px;
}

h3 {
	font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-size: 36px;
   line-height: 44px;
   text-align: justify;
 
   color: #000000;
}

.img1 {
	position: relative;
	width: 1130px;
   height: 781px;
   left: 45px;
   top: -12px;
}

.shift {
	position: relative;
	width: 423px;
   height: 270px;
   left: 86px;
   top: -1423px;
}

.shift li {
	font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-size: 36px;
   line-height: 44px;
   text-align: justify;

   color: #000000;
}

.go {
	position: relative;
	width: 1107px;
   height: 864px;
   left: 45px;
   top: -332px;
}

h4 {
	position: relative;
	width: 200px;
   height: 48px;
   left: 732px;
   top: -1159px;
}

h4 {
	font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-size: 36px;
   line-height: 44px;
   text-align: justify;

   color: #000000;
}

.ever {
	position: relative;
	width: 503px;
   height: 48px;
   left: 600px;
   top: -1130px;
}

.ever {
	font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-size: 36px;
   line-height: 44px;
   text-align: justify;

   color: #000000;
}

.footer-text {
	font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-size: 25px;
   line-height: 30px;
	display: flex;
	padding: 114px 0
}

.footer-text {
	position: relative;
	width: 900px;
   height: 30px;
   left: 80px;
   top: -958px;
   /*позиционирование по центру*/
	margin: 0 auto; 
}

.footer-text p {
	margin-right: 150px;
}

Написано более двух лет назад

Ankhena @Ankhena Куратор тега CSS

iadarch, посмотрите https://codepen.io/AnnaSummer/pen/gOvbEdB

Написано более двух лет назад

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

1 комментарий

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

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

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

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

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

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

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 139 просмотров
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- вчера
- 96 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 99 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 96 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 74 просмотра
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 64 просмотра
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 100 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 83 просмотра
2

ответа
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 21 нояб.
- 36 просмотров
0

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Записать рекламные видео креативы для мобильной игры

25 нояб. 2024, в 05:56

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

Аудит и поддержка проекта внедрению виртуальной архитектуры (АСУ ТП)

25 нояб. 2024, в 03:04

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

Сделать простой лендинг

25 нояб. 2024, в 02:45

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

Откуда мы знаем? Причин может быть много. Скинь разметку и стили, чтобы точно понимать проблему
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Seon</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;400&family=Marcellus&family=Montserrat:ital,wght@0,100;1,400;1,500;1,600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header id="header" class="header"> <div class="container"> <img src="img/logo.png" alt="logo" class="logo"> <ul class="menu"> <li> <a href="index.html"> Главная </a> </li> <li> <a href="about.html"> О нас </a> </li> <li> <a href="products.html"> Товары </a> </li> <li> <a href="services.html"> Услуги </a> </li> </ul> <div class="cont"> <img src="img/Group 10.png" alt="img1" class="img1"> <h1>Мастерская, занимающаяся искусством и художественным ремеслом.</h1> <h2>Бизнес-идея зародилась осенью 2021, и уже сейчас ателье Seon активно развивает свою деятельность.</h2> </div> </div> </header> <section id="about" class="about"> <div class="container"> <img src="img/Group12.png" alt="go" class="go"> <h3>Плюсы:</h3> <ul class="shift"> <li>расположение в центре города</li> <li>стабильная цена на продукцию и услуги </li> <li>качество и комфорт </li> <li>акции и подарки </li> </ul> <h4>Минусы:</h4> <ul class="ever"> <li>Попробуй найти, от нас скидка 30% на всю продукцию Seon :)</li> </ul> </div> </section> <footer id="footer" class="footer"> <div class="container"> <div class="footer-text"> <p> ©2021-2022 Atelier Seon </p> <p> Все права защищены </p> </div> </div> </footer> </body> </html>
iadarch, посмотрите https://codepen.io/AnnaSummer/pen/gOvbEdB

Answer 1 · 2022-05-03 19:52:40

Вот это да... Сколько отрицательных значений свойства top

top: -117px;
top: -737px;
top: -348px;
top: -1209px;
top: -1423px;
top: -332px;
top: -1159px;
top: -1130px;
top: -958px;

Следуя геометрии, у тебя снизу нет пустого пространства. Но ты его сделал визуально, тупо сдвинув элементы вверх на отрицательное значение. В сумме, сдвиг вверх примерно на 7000 пикселей. Отсюда и отступ. Решением будет ограничить высоту body, а еще лучше не страдать фигней и переписать с нуля в нормальном стиле

Answer 2 · 2022-05-04 11:09:57

Zold09 @Zold09

Вбей в инете или на ютубе - "Как прижать футер " и глянь..это не долго и понятно

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

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

Как убрать пустое пространство под footer'ом?

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

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

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