Длина блока body
Друзья, всем привет. Я только познаю верстку, поэтому комменты, типа "учи сначала основы и так далее", пожалуйста, не пишите. Я знаю, что мне еще учиться и учиться. Вопрос у меня связан с длиной блока body. Суть в том, что контентная часть этого блока значительно больше, чем длина, которая отображается в панели разработчика гугла, из-за чего блок footer находится не совсем там, где нужно. Подскажите, пожалуйста, куда копать и что делать?
*,
*:after,
*:before {
box-sizing: border-box;
padding: 0;
margin: 0;
transition: .5s ease-in-out;
/* добавим плавность переходов для всех элементов страницы*/
}
body {
max-height: 100%;
}
ul {
list-style: none;
}
a {
text-decoration: none;
outline: none;
}
img {
display: block;
width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Playfair Display';
font-weight: normal;
letter-spacing: 1px;
}
body {
font-family: 'Open Sans', arial, sans-serif;
font-size: 14px;
line-height: 1;
color: #373737;
background: #e49999;
}
header:after,
.container:after,
footer:after,
.widget-posts-list li:after,
#subscribe:after {
content: "";
display: table;
clear: both;
}
.container_main {
margin: 0 auto;
width: 100%;
max-width: 960px;
padding: 0 15px;
}
header {
width: 100%;
background: rgb(223, 119, 119);
box-shadow: 3px 3px 1px rgba(0, 0, 0, .05);
padding: 10px 10px;
margin-bottom: 30px;
position: relative;
}
.logo {
width: 9em;
height: 4em;
display: block;
float: left;
}
/* меню */
#menu {
float: right;
}
#menu li {
display: inline-block;
margin-top: 10px;
margin-right: 30px;
}
#menu a {
color: #111;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
display: block;
line-height: 40px;
}
#menu a:hover {
color: rgb(255, 0, 255);
}
#menu li:last-child {
margin-right: 0;
}
/* кнопка переключения меню, появляющаяся при ширине 768px */
.nav-toggle {
border-radius: 6px;
display: none;
position: relative;
float: right;
width: 40px;
height: 40px;
margin-left: 20px;
background: rgb(144, 37, 137);
cursor: pointer;
}
.nav-toggle span {
display: block;
position: absolute;
top: 19px;
left: 8px;
right: 8px;
height: 2px;
background: white;
}
.nav-toggle span:before,
.nav-toggle span:after {
content: "";
position: absolute;
display: block;
left: 0;
width: 100%;
height: 2px;
background: white;
}
.nav-toggle span:before {
top: -10px;
}
.nav-toggle span:after {
bottom: -10px;
}
.title {
text-align: center;
font-family: 'Caveat';
}
.first_course {
height: 20em;
background: url("../icon/new_photo/IMG_4259.JPG");
background-repeat: no-repeat;
background-position: right;
background-size: contain;
margin-top: 3em;
}
.first_course dt {
font-family: 'Caveat';
font-size: 3.5em;
}
.first_course dd {
margin-top: 1em;
margin-left: 5%;
font-family: 'Caveat';
font-size: 2em;
background: linear-gradient(135deg, #714141 75%, #ad4141 25%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.contain_course {
margin-top: 1em;
color: #714141;
font-size: 3.5em;
font-family: 'Caveat';
}
.contain_course::first-letter {
font-size: 1.5em;
color: rgb(223, 119, 119);
}
/*color: #c900ae;*/
.points_course {
color: #323232;
font-family: 'Caveat';
font-size: 1.7em;
background: url('../icon/new_photo/IMG_4260.JPG');
background-position: right;
background-size: 80%;
background-repeat: no-repeat;
line-height: 1.5em;
}
.point_10:hover {
color: aqua;
}
.point_11:hover {
color: aqua;
}
.point_12:hover {
color: aqua;
}
.point_13:hover {
color: aqua;
}
.price_course {
padding-top: 5em;
color: #714141;
}
.price_course h2 {
font-family: 'Caveat';
font-size: 4em;
}
.price_one_course {
padding-top: 2em;
}
.price_one_course h3 {
font-family: 'Caveat';
font-size: 2em;
}
.givemecourse {
margin-top: 2em;
font-family: 'Playfair Display';
font-size: 15px;
top: 185em;
left: 8em;
font-weight: 700;
color: white;
text-decoration: none;
padding: .8em 1em calc(.8em + 3px);
border-radius: 5px;
background: rgb(144, 37, 137);
box-shadow: 0 -3px rgb(144, 37, 137) inset;
transition: .1s linear;
}
.givemecourse:hover {
background: rgb(5, 1, 5);
}
.givemecourse:active {
background: rgb(0, 0, 0);
box-shadow: 0 3px rgb(0, 0, 0) inset;
}
footer {
padding: 10px 0;
background: #3C3D41;
color: white;
}
.footer-col {
width: 33.3333333333%;
float: left;
}
.footer-col a {
color: white;
}
.footer-col:last-child {
text-align: right;
}
.social-bar-wrap {
text-align: center;
}
.social-bar-wrap a {
margin-right: 1em;
font-size: 18px;
}
.social-bar-wrap {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.link_icon {
width: 3em;
height: 3em;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Курсы, полезные материалы и многое другое о детях, половом воспитании и сексе</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Lobster&display=swap');
</style>
<link rel="stylesheet" href="CSS\style_courses.css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic|Playfair+Display:400,700&subset=latin,cyrillic">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<header>
<nav class="container">
<a class="logo" href="">
<img src="icon\logo.png" alt="logo">
</a>
<div class="nav-toggle"><span></span></div>
<ul id="menu">
<li><a href="">Главная</a></li>
<li><a href="">Курсы</a></li>
<li><a href="">Гайды</a></li>
<li><a href="">Консультации</a></li>
</ul>
</nav>
</header>
<div class="container_main">
<h1 class="title">Видео-лекции, подкасты, чек-листы, практические задания, рекомендации и просто масса полезной информации.
</h1>
<div class="first_course">
<div class="name_course">
<dl>
<dt>Курс «Половое воспитание для родителей».</dt>
<dd class="info__course1"><i>Общие знания о том, что такое половое воспитание. В каком возрасте,
какими
словами и на какие темы нужно говорить с детьми: от самого рождения до совершеннолетия. Вы
сможете
узнать, что включает в себя половое воспитание, какие темы важно проговаривать с детьми и
как.</i>
</dd>
<dd>Курс включает в себя 13 видео-лекций, размещенных в закрытом телеграмм-канале. Продолжительность каждой лекции от 15 до 35 минут. Вы можете сами выбирать, когда и какую лекцию просматривать.
</dd>
</dl>
</div>
<div class="container_course">
<h2 class="contain_course">Содержание курса: </h2>
<div class="points_course">
<ol>
<li>Введение. Коротко о том, что такое половое воспитание. Что оно в себя включает и чем отличается от сексуального образования. Почему половое воспитание необходимо и какую роль в развитии ребенка оно играет.</li>
<li>Половое воспитание для детей до 5 лет. Психологические особенности детей этого возраста. Какие термины использовать родителям для обозначения половых органов с детьми в этом возрасте. Основные действия родителей в этот период – практические
рекомендации.</li>
<li>Детская мастурбация. Когда возникает и как проявляется. Почему ее не надо бояться и предотвращать. И когда все же необходимо обращаться к специалистам.</li>
<li>Половое воспитание в возрасте от 5 до 10 лет. Возрастные психологические особенностей детей в этот период. Что интересует мальчиков и девочек в этот период и как с ними об этом говорить.
</li>
<li>Физиологические изменения в теле ребенка в подростковый период. Как подготовить ребенка к этому. Поговорим про том, как объяснить появление волос на теле, запах пота, прыщи и многое другое. А также о том, как приучить ребенка к личной гигиене.</li>
<li>Менструация. Как разговаривать об этой теме с девочками и мальчиками. Как устроены половые органы девочек. И все о средствах личной гигиены в период менструации.</li>
<li>Первые полюции. Особенности полового созревания с юношей. Как и о чем говорить?</li>
<li>Контрацепция. С какого возраста и как эту тему нужно обсуждать с детьми. Поговорим о плюсах и минусах различных видов контрацепции. А также рассмотрим виды ЗППП и ИППП.</li>
<li>Первый секс. Как и когда говорить с ребенком именно о сексе. Какие термины нужно использовать при разговорах не тему секса. Нужно ли говорить подросткам, что взрослые люди занимаются сексом для получения удовольствия?</li>
</ol>
<div class="point_10">
<p>10. Умение сказать «нет». Всё о том, как помочь ребенку ценить свое тело и свои эмоции, выстраивать личные границы не только в сексе, но и во взаимодействии с другими людьми.</p>
</div>
<div class="point_11">
<p>11. Как реагировать родителям, если ребёнок говорит о том, что ему нравятся представители своего пола?
</p>
</div>
<div class="point_12">
<p>12. Сексуальные интроекты. Как часто взрослые случайными фразами могут негативно повлиять на сексуальность ребенка.</p>
</div>
<div class="point_13">
<p>13. Безопасность в интернете. О чем важно говорить с ребенком, перед его регистрацией в социальных сетях. Какие опасности может нести человек за аватаркой.</p>
</div>
</div>
<div class="price_course">
<h2>Цена курса 4000 рублей</h2>
<button class="givemecourse">Купить курс</button>
</div>
<div class="price_one_course">
<h3>Также вы можете приобрести доступ только к 1 из интересующих вас лекций всего за 400 рублей.
</h3>
<button class="givemecourse">Купить лекцию</button>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-col"><span>Елена Сидельникова © 2023</span></div>
<div class="footer-col">
<div class="social-bar-wrap">
<a class="link_icon" title="Instagram" href="https://instagram.com/elena_ne_mudraya?igshid=MzRlODBiNWFlZA==" target="_blank">
<img src="icon\instagram.svg" alt="">
</a>
<a class="link_icon" title="Telegram" href="https://t.me/elena_ne_mudrayaa" target="_blank">
<img src="icon\telegram.svg" alt="">
</a>
<a class="link_icon" title="YouTube" href="https://youtube.com/@elena_ne_mudraya?si=XNU7INeSR0psJ0pP" target="_blank">
<img src="icon\youtube.svg" alt="">
</a>
<a class="link_icon" title="Dzen" href="https://dzen.ru/id/6125aea743c86f50be7123b0" target="_blank">
<img src="icon\yandex.svg" alt="">
</a>
</div>
</div>
<div class="footer-col">
<a href="mailto:[email protected]">Написать письмо</a>
</div>
</div>
</footer>
<script>
$('.nav-toggle').on('click', function() {
$('#menu').toggleClass('active');
});
</script>
</body>
</html>