header, footer, body, .video-conteiner {
background-color: darkolivegreen
}
.navbar p {
color: darkgray;
padding-left: 15%;
}
/Стили панели навигации при наведении мышью/
.navbar p:hover {
color: aliceblue;
}
/* Простые селекторы*/
.video-container {
display: inline-block;
padding-left: 1%;
padding-top: 1%;
}
.navbar {
color: darkgray;
padding-left: 15%;
}
header {
padding-left: 1%;
padding-top: 1.2%;
}
footer {
position: absolute;
bottom: 0;
font-size: medium;
color: dimgrey;
}
aside {
height: 100%; /* Высота в полный размер. Этот параметр можно убрать, если вы хотите выставлять высоту автоматически /
width: 10%;
position: absolute; / Фиксированная позиция сайд-бара. Так он будет оставаться на месте при скроллинге /
z-index: 1; / Сайд-бар будет поверх остальных элементов /
top: 0; / Сайдбар будет в самой верхней части страницы /
left: 0;
background-color: #111; / Черный цвет фона (задан в виде кода) /
overflow-x: hidden; / Отключаем горизонтальную прокрутку */
padding-top: 2%;
font-size: large;
}
body {
padding-left: 11%;
}
/* Стили футера /
footer {
position: absolute;
bottom: 0;
width: 100%;
/ Высота footer */
height: 30px;
background: black;
line-height: 66%;
margin-top: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LifeSpot</title>
<!--Подключение стилей по относительному пути из внешнего файла-->
<link href="../Static/CSS/index.css" rel="stylesheet" type="text/css">
</head>
</head>
<header>
<!--Заголовок страницы-->
<h1>LifeSpot - прямые трансляции с улиц</h1>
<!--Параграф-->
<p>Покажем, что происходит прямо сейчас</p>
</header>
<aside id="sidebar">
<div class="navbar">
<a href="/"><p>Все трансляции</p></a>
<a href="/"><p>О проекте</p></a>
</div>
</aside>
<body>
<div class="bordered">
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/srlpC5tmhYs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h3 class="video-title">Нью-Йорк, Брайант Парк</h3>
</div>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/wCcMcaiRbhM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h3 class="video-title">Санкт-Петербург, Невский Проспект</h3>
</div>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JplMzss6_YE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h3 class="video-title">Лондон, автобусный маршрут</h3>
</div>
</div>
</body>
</html>
<footer>
<p>LifeSpot - все права защищены</p>
<p>Связаться с нами: contact@lifespot.ru</p>
</footer>Пишу учебный сайт, и в нем футер залазит на один из блоков, как мне "прибить" его в самый низ, чтобы он не мешал?
