Как прижать футер к низу страницы, смотрел другие темы, но ничего не помогло, он зафиксирован внизу браузера, а не страницы.
Код html:
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.png" type="image/png">
<title>TechUP</title>
</head>
<body>
<header>
<div class="logo">
<a title="Главная" href="#" class="logo">TechUP</a>
<input class="search-folder" autocomplete="none" placeholder="Поиск" size="70%">
<a title="Найти" href="#"><img class="search-icon" src="img/search.png"></a>
<span class="list">
<a class="home" href="#" title="Главная">главная</a>
<a class="news" href="#" title="Новости">новости</a>
<a class="about" href="#" title="О нас">о нас</a>
</span>
</div>
</header>
<main>
<div class="content">
<div class="post1">
<a title="#" href="#"><img src="img/demo.png" alt="" class="img1"></a>
<a title="#" href="#"><h1>В Лондоне прошел турнир по КС ГО</h1></a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non earum sapiente quam natus, nostrum nemo laudantium, numquam possimus fugiat. Tempore, fugit soluta, quibusdam alias at fugiat nam beatae porro deserunt, velit amet nisi consequatur adipisci commodi doloribus, nostrum repudiandae minima. Dolor nemo, numquam eius fuga sapiente odit, dolorem...</p>
<a title="Читать далее --->" href="#" class="readmore">Читать далее ---></a>
<div class="post-meta">
<img src="img/eye.png" class="views">
<span class="counter">123</span>
<a href="#" title="Лайкнуть"><img class="likes" src="img/favorite.png"></a>
<span class="counter">123</span>
</div>
<hr>
<div class="post2">
<a title="#" href="#"><img src="img/demo.png" alt="" class="img2"></a>
<a title="#" href="#"><h1>В Лондоне прошел турнир по КС ГО</h1></a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non earum sapiente quam natus, nostrum nemo laudantium, numquam possimus fugiat. Tempore, fugit soluta, quibusdam alias at fugiat nam beatae porro deserunt, velit amet nisi consequatur adipisci commodi doloribus, nostrum repudiandae minima. Dolor nemo, numquam eius fuga sapiente odit, dolorem...</p>
<a title="Читать далее --->" href="#" class="readmore">Читать далее ---></a>
<div class="post-meta">
<img src="img/eye.png" class="views">
<span class="counter">123</span>
<a href="#" title="Лайкнуть"><img class="likes" src="img/favorite.png"></a>
<span class="counter">123</span>
</div>
<hr>
</div>
</div>
<div class="ad">
AD
</div>
</main>
<footer>
<div class="contacts">
<a title="Мы в ВК" href="#"><img class="img-vk" src="img/vk.png" alt="VK"></a>
<a title="Мы в Телеграме" href="#"><img class="img-telegram" src="img/telegram.png" alt="Telegram"></a>
</div>
<div class="copyright">
© techup.info, 2019-2020 | All rights reserved.
</div>
</footer>
</body>
</html>
Код css:
@import url('https://fonts.googleapis.com/css?family=Audiowide|Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Prosto+One|Russo+One&display=swap');
* {
padding: 0;
margin: 0;
outline: none;
}
a {
text-decoration:none;
color: white;
}
html {
height: 100%;
}
body, html {
background-color: white;
position: relative;
margin: 0;
/* Растягиваем body по высоте html */
min-height: 100%;
}
.logo {
color: white;
font-family: Audiowide;
font-size: 40px;
vertical-align: middle;
}
header {
background-color: #1b2928;
width: 100%;
height: 57px;
position: fixed;
padding-left: 15px;
z-index: 9999;
}
main {
padding-top: 90px;
padding-left: 30px;
padding-right: 30px;
height: 100%;
padding-bottom: 60px;
}
.post1 {
float: left;
max-width: 80%;
max-height: 40%;
overflow: hidden;
}
.ad {
float: right;
border-left: 1px solid silver;
height: 100%;
position: absolute;
right: 10%;
padding-left: 20px;
padding-right: 20px;
}
.img1 {
max-width: 500px;
max-height: 360px;
overflow: hidden;
}
.img2 {
max-width: 500px;
max-height: 360px;
overflow: hidden;
}
footer {
width: 100%;
height: 60px;
background-color: #1b2928;
color: white;
text-align: center;
font-family: Roboto;
font-size: 15px;
padding-top: 15px;
position: absolute;
bottom: 0;
}
.img-vk {
width: 20px;
height: 20px;
}
.img-telegram {
width: 20px;
height: 20px;
}
.contacts {
padding-bottom: 5px;
}
h1 {
font-family: Roboto;
font-size: 25px;
color: black;
float: right;
margin-top: -330px;
margin-left: 55%;
margin-right: 2%;
text-align: center;
}
p {
font-family: Roboto;
color: #424a57;
font-size: 20px;
float: right;
margin-top: -288px;
margin-left: 55%;
text-align: center;
}
.readmore {
color: #49648f;
font-family: Prosto One;
font-size: 23px;
float: right;
margin-top: -55px;
margin-bottom: 35px;
padding-left: 35px;
}
hr {
color: silver;
size: 1px;
width: 100%;
margin-bottom: 20px;
}
.post-meta {
display: flex;
flex-direction: row;
align-items: center;
float: right;
margin-top: -63px;
}
.counter {
font-family: Roboto;
font-size: 20px;
}
.likes {
width: 40px;
height: 40px;
margin-right: 5px;
}
.views {
width: 40px;
height: 40px;
margin-right: 5px;
}
.counter {
padding-right: 20px;
}
.search-folder {
height: 25px;
vertical-align: middle;
margin-left: 2%;
}
.search-icon {
width: 23px;
height: 23px;
background-color: #49648f;
margin-left: -20px;
vertical-align: middle;
padding: 3px;
}
.list {
font-family: Prosto One;
font-size: 33px;
padding-left: 45px;
vertical-align: middle;
}
.home {
padding-right: 20px;
}
.news {
padding-right: 20px;
}
.home:hover {
color: darkgrey;
}
.news:hover {
color: darkgrey;
}
.about:hover {
color: darkgrey;
}
.readmore:hover {
color: #2b3b54;
}
h1:hover {
color: #4d4d4d;
}
Заранее спасибо :)