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

Question

iadarch @iadarch

HTML
CSS

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

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

Вопрос задан более года назад
693 просмотра

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

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

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

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

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

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

HTML

+1 ещё

Простой
Как изменить строчку кода HTML на чужом сайте tampermonkey?
- 1 подписчик
- 41 минуту назад
- 49 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- 2 часа назад
- 26 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- 14 часов назад
- 103 просмотра
2

ответа
CSS

Простой
Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?
- 1 подписчик
- 20 часов назад
- 93 просмотра
2

ответа
CSS

Простой
Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный — всю?
- 1 подписчик
- 23 часа назад
- 110 просмотров
4

ответа
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- вчера
- 81 просмотр
0

ответов
HTML

+3 ещё

Простой
Flask вывод изображения из базы данных?
- 1 подписчик
- вчера
- 77 просмотров
1

ответ
CSS

Простой
Как задать универсальный @keyframes для нескольких разных блоков, без скриптов?
- 1 подписчик
- вчера
- 72 просмотра
1

ответ
JavaScript

+4 ещё

Простой
Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?
- 1 подписчик
- 30 апр.
- 90 просмотров
1

ответ
CSS

Простой
Как в CSS повернуть горизонтальный сайт на 90° чтобы на смартофне можно было горизонтально смотреть?
- 4 подписчика
- 30 апр.
- 1103 просмотра
2

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

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

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

Необходимо доделать сайт

02 мая 2024, в 13:10

1000 руб./в час

Собрать образ Ubuntu + RedOS для платы на RK3588

02 мая 2024, в 13:09

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

Необходимо доработать сайт на Azot CSM

02 мая 2024, в 13:02

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

Откуда мы знаем? Причин может быть много. Скинь разметку и стили, чтобы точно понимать проблему
<!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'ом?

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

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

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