This question has already been answered:

Good afternoon, I can not screw the footer to the bottom of the page, it is constantly positioned near the logo.

*{ margin: 0; padding: 0 ; } a { text-decoration: none; } body { height:100%; margin:0; background: url('../img/bg-body.png') no-repeat 50% 0 #0e0e0e; z-index: 1; position: relative; font: 15px/4 Arial, sans-serif; padding: 0 0; } .wrapper{ width: 1000px; position: fixed; top:0; left:0; width: 100%; margin:0px auto; } .wrapper{ position: relative; width: 250px; height: 300px; margin: 0 auto; left: 0px; top: 137px; } .logo{ position: absolute; margin: 0 0 0 0; z-index: 10; } .Nav-left{ float: left; margin: 30px 0 0 -350px; } .Nav-left li{ position: relative; float: left; margin: 0 50px 0 0; } .Nav-left li a{ color:#000000; text-transform: uppercase; font-weight: bold; } .Nav-left li a:hover{ color:#0582fb; box-shadow: 0 0 5px 2px #fff; } .Nav-left li a:active{ color:#0582fb; text-decoration: underline; } .Nav-left ul li{ position: relative; } .submenu { position: absolute; list-style: none; left: -20px; top:100%; z-index: 10; width: 150px; background: #fff; display: none; } li:hover .submenu{ display: block; } .submenu li { width: 100%; text-align: center; } .submenu li a{ line-height: 45px;+ } .Nav-right li a:active{ color:#0582fb; text-decoration: underline; } .Nav-right { position: relative; float: right; margin: 5px -430px 0 0; } .Nav-right li { float: left; margin: 0; padding: 25px; } .Nav-right li a { color:#000000; text-transform: uppercase; font-weight: bold; } .Nav-right li a:hover{ color: #0582fb; } .Nav-right li.current a{ color: #0582fb; text-decoration: underline; } .info { font: 90% 'Fira Sans', sans-serif; font-weight: Medium; position: absolute; color: #ffffff; margin: 0 0 0 0; top: 120px; left: -380px; float: left; } .infobg{ position: absolute; float: left; top: 110px; left: -400px; } .sliderbg { z-index: 1; background: #fff no-repeat; position: absolute; top: 190px ; width:910px; height:290px; left: -330px; } .slider { position: relative; width: 890px; margin: 5px auto; box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); } .slider input[name="switch"] { display: none; } .switch { position: absolute; left: 0; bottom: -40px; text-align: center; width: 100%; } .switch label { display: inline-block; width: 8px; height: 8px; cursor: pointer; margin: -15px 3px; box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8); border-radius: 50%; border: 5px solid #2f363c; background-color: #738290; } #btn1:checked~.switch label[for="btn1"] { background-color: white; } #btn2:checked~.switch label[for="btn2"] { background-color: white; } #btn3:checked~.switch label[for="btn3"] { background-color: white; } .slider-inner { overflow: hidden; } .slides { width: 300%; transition: all 0.5s; } .slides img { width: 890px; height: 290px; float: left; } #btn1:checked~slider-inner slides { transform: translate(0); } #btn2:checked~.slider-inner .slides { transform: translate(-680px); } #btn3:checked~.slider-inner .slides { transform: translate(-1360px); } .bgsl{ z-index: 1; background: #fff no-repeat; position: absolute; top: 285px ; width:1100px; height:240px; left: -420px; } .infobag{ background: url('../img/infobg.png'); position: absolute; top: 525px; width: 1101px; height: 430px; left: -421px; } .infobagcnt{ position:absolute; top:525px; width: 1101px; height: 100%; left: -421px; } h1{ font-size: 27px; color: #fff; text-align: center; } h2{ font-size: 20px; color: #fff; text-align: center; } h3{ font-size: 27px; color: #000000; text-align: center; } .video{ margin: 0 0 25px 80px; } .infob{ font: 90% 'Fira Sans', sans-serif; font-weight: Medium; position: absolute; color: #ffffff; margin: 0 0 0 0; top: 90px; left: 590px; float: left; } .infotren{ background-color: #fff; position: absolute; top: 955px; width: 1101px; height: 570px; left: -420px; } .pol{ background: url('../img/polos.gif'); margin: 25px 0 -15px 0; width: 100%; height: 3px;} .round { border-radius: 100px; /* Радиус скругления */ border: 3px solid #a2a2a2; /* Параметры рамки */ } .blc-inftren{ position: relative; top: -150px; } .inftren{ float: left; position: absolute; top: 120px; left: -55px ; margin: 25px 0 0 25px; padding: 10px; float: left; margin-left: 100px; text-align: center; width: 180px; } .inftren:hover{ width: 180px; height: 280px; background: #0c7df9; border-radius: 25px; } .pol1{ background: url('../img/polos.gif'); margin: 25px 0 -15px 10%; width: 80%; height: 3px;} .pol2{ background: url('../img/polos.gif'); margin: 350px 0 -15px 0; width: 100%; height: 3px;} .inftren1{ float: left; position: absolute; top: 120px; left: 145px ; margin: 25px 0 0 25px; padding: 10px; float: left; margin-left: 100px; text-align: center; width: 180px; } .inftren1:hover{ width: 180px; height: 280px; background: #0c7df9; border-radius: 25px; } .inftren2{ float: left; position: absolute; top: 120px; left: 345px ; margin: 25px 0 0 25px; padding: 10px; float: left; margin-left: 100px; text-align: center; width: 180px; } .inftren2:hover{ width: 180px; height: 280px; background: #0c7df9; border-radius: 25px; } .inftren3{ float: left; position: absolute; top: 120px; left: 145px ; margin: 25px 0 0 25px; padding: 10px; float: left; margin-left: 100px; text-align: center; width: 180px; } .inftren3:hover{ width: 180px; height: 280px; background: #0c7df9; border-radius: 25px; } .inftren4{ float: left; position: absolute; top: 120px; left: 545px ; margin: 25px 0 0 25px; padding: 10px; float: left; margin-left: 100px; text-align: center; width: 180px; } .inftren4:hover{ width: 180px; height: 280px; background: #0c7df9; border-radius: 25px; } .inftren5{ float: left; position: absolute; top: 90px; left: 745px ; margin: 25px 0 0 25px; padding: 10px; float: left; margin-left: 100px; text-align: center; width: 180px; } .inftren5:hover{ width: 180px; height: 280px; background: #0c7df9; border-radius: 25px; } .fi{ font: 90% 'Fira Sans', sans-serif; font-weight: medium; top: 200px; } .btnc{ position: relative; top: 260px; left: 445px; } .btn { position: absolute; -moz-box-shadow:inset 0px 1px 0px 0px #dcecfb; -webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb; box-shadow:inset 0px 1px 0px 0px #dcecfb; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4398ef), color-stop(1, #0c7df9) ); background:-moz-linear-gradient( center top, #4398ef 5%, $0c7df9 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4398ef', endColorstr='#0c7df9'); background-color:#0c7df9; -webkit-border-top-left-radius:0px; -moz-border-radius-topleft:0px; border-top-left-radius:0px; -webkit-border-top-right-radius:0px; -moz-border-radius-topright:0px; border-top-right-radius:0px; -webkit-border-bottom-right-radius:0px; -moz-border-radius-bottomright:0px; border-bottom-right-radius:0px; -webkit-border-bottom-left-radius:0px; -moz-border-radius-bottomleft:0px; border-bottom-left-radius:0px; text-indent:0; border:1px solid #84bbf3; display:inline-block; color:#ffffff; font-family:Arial; font-size:15px; font-weight:bold; font-style:normal; height:40px; line-height:40px; width:200px; text-decoration:none; text-align:center; text-shadow:1px 1px 0px #528ecc; } .btn:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #80b5ea), color-stop(1, #4398ef) ); background:-moz-linear-gradient( center top, #80b5ea 5%, #4398ef 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c7df9', endColorstr='#4398ef'); background-color:#80b5ea; }.btn:active { position:relative; top:1px; } .infcrd{ position: relative; top: 1430px; } .bgcrd{ background: url('../img/cartbg.png'); height: 300px; width: 1100px; top: 95px; left: -420px; position: absolute; } .otz{ background: #fff; position: relative; top: 1680px; left: -420px; height: 300px; width: 1100px; } .pol3{ position: absolute; background: url('../img/polos.gif'); z-index: 10; margin: 50px 0 -15px 0; width: 100%; height: 3px;} .infotz{ position: absolute; top: 30px;left: 490px; } .box_in{ background: #5F9EA0; width:1101px; margin: 0 0 -249px 0; padding-bottom:249px; } .footer{ position:absolute; margin-top:100px; bottom:0; background-color: #000; width:1101px; height: 249px; } .ftbg{ background: url('../img/footer_pic.png'); position: absolute; width: 300px; height: 249px; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> {headers} <link rel="stylesheet" href="{THEME}/css/style.css"> <link rel="stylesheet" href="{THEME}/css/engine.css"> <link href="https://fonts.googleapis.com/css?family=Fira+Sans:500,500i,700" rel="stylesheet"> </head> <body> {AJAX} <div class="wrapper"> <header> <ul class="Nav-left"> <li> <a href="#" title="">О нас</a> <ul class="submenu"> <li><a href="#">Новости</a></li> <li><a href="#">ФОТО</a></li> <li><a href="#">ВИДЕО</a></li> <li><a href="#">ПАРТНЕРЫ</a></li> <li><a href="#">ВАКАНСИИ</a></li> </ul> </li> <li><a href="#">Акции</a></li> <li><a href="#">Расписание</a></li> </ul> <div class="logo"> <a href="#"><img src="{THEME}/img/logo.png" width="250" height="110"> </a></div> <ul class="Nav-right"> <li><a href="#">Стоимость</a></li> <li><a href="#">Акции</a></li> <li><a href="#">Контакты</a></li> </ul> <div class="infobg"><a href="#"><img src="{THEME}/img/address_nav_bg.png" width="15" height="20"></a></div> <span class="info"><br></span> <div class="bgsl"></div> <div class="sliderbg"> <div class="slider"> <input type="radio" name="switch" id="btn1" checked> <input type="radio" name="switch" id="btn2"> <input type="radio" name="switch" id="btn3"> <div class="switch"> <label for="btn1"></label> <label for="btn2"></label> <label for="btn3"></label> </div> <div class="slider-inner"> <div class="slides"> <img src="http://conceptartworld.com/wp-content/uploads/2013/10/Mathieu_Latour-Duhaime_Art_exo-02-small-680x340.jpg"/> <img src="http://conceptartworld.com/wp-content/uploads/2013/10/Mathieu_Latour-Duhaime_Concept_Art_Thief_01-680x340.jpg"/> <img src="http://conceptartworld.com/wp-content/uploads/2013/10/Mathieu_Latour-Duhaime_Concept_Art_Thief_07-680x340.jpg"/> </div> </div> </div> </div> <div class="infobagcnt"> {info}{content} </div> <div class="footer"> <div class="ftbg"> </div> </div></div> </header> </body> </html>

Reported as a duplicate by members of Visman , HamSter , Alexey Shimansky , Sasha Omelchenko , Cheg 7 Sep '17 at 13:00 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

1 answer 1

The code could not be started due to inserts {} and external files. Please note that opening HTML tags do not always correspond to closing HTML tags in your code. I strongly advise you to skip your HTML code through the https://validator.w3.org/ validator. If you need a fixed footer at the bottom of the page, you must use the following style:

 .footer { position: fixed; bottom: 0; }

Result:

 *{ margin: 0; padding: 0 ; } a { text-decoration: none; } body { height:100%; margin:0; background: url('../img/bg-body.png') no-repeat 50% 0 #0e0e0e; z-index: 1; position: relative; font: 15px/4 Arial, sans-serif; padding: 0 0; } .wrapper{ width: 1000px; position: fixed; top:0; left:0; width: 100%; margin:0px auto; } .wrapper{ position: relative; width: 250px; height: 300px; margin: 0 auto; left: 0px; top: 137px; } .logo{ position: absolute; margin: 0 0 0 0; z-index: 10; } .Nav-left{ float: left; margin: 30px 0 0 -350px; } .Nav-left li{ position: relative; float: left; margin: 0 50px 0 0; } .Nav-left li a{ color:#000000; text-transform: uppercase; font-weight: bold; } .Nav-left li a:hover{ color:#0582fb; box-shadow: 0 0 5px 2px #fff; } .Nav-left li a:active{ color:#0582fb; text-decoration: underline; } .Nav-left ul li{ position: relative; } .submenu { position: absolute; list-style: none; left: -20px; top:100%; z-index: 10; width: 150px; background: #fff; display: none; } li:hover .submenu{ display: block; } .submenu li { width: 100%; text-align: center; } .submenu li a{ line-height: 45px;+ } .Nav-right li a:active{ color:#0582fb; text-decoration: underline; } .Nav-right { position: relative; float: right; margin: 5px -430px 0 0; } .Nav-right li { float: left; margin: 0; padding: 25px; } .Nav-right li a { color:#000000; text-transform: uppercase; font-weight: bold; } .Nav-right li a:hover{ color: #0582fb; } .Nav-right li.current a{ color: #0582fb; text-decoration: underline; } .info { font: 90% 'Fira Sans', sans-serif; font-weight: Medium; position: absolute; color: #ffffff; margin: 0 0 0 0; top: 120px; left: -380px; float: left; } .infobg{ position: absolute; float: left; top: 110px; left: -400px; } .sliderbg { z-index: 1; background: #fff no-repeat; position: absolute; top: 190px ; width:910px; height:290px; left: -330px; } .slider { position: relative; width: 890px; margin: 5px auto; box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); } .slider input[name="switch"] { display: none; } .switch { position: absolute; left: 0; bottom: -40px; text-align: center; width: 100%; } .switch label { display: inline-block; width: 8px; height: 8px; cursor: pointer; margin: -15px 3px; box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8); border-radius: 50%; border: 5px solid #2f363c; background-color: #738290; } #btn1:checked~.switch label[for="btn1"] { background-color: white; } #btn2:checked~.switch label[for="btn2"] { background-color: white; } #btn3:checked~.switch label[for="btn3"] { background-color: white; } .slider-inner { overflow: hidden; } .slides { width: 300%; transition: all 0.5s; } .slides img { width: 890px; height: 290px; float: left; } #btn1:checked~slider-inner slides { transform: translate(0); } #btn2:checked~.slider-inner .slides { transform: translate(-680px); } #btn3:checked~.slider-inner .slides { transform: translate(-1360px); } .bgsl{ z-index: 1; background: #fff no-repeat; position: absolute; top: 285px ; width:1100px; height:240px; left: -420px; } .infobag{ background: url('../img/infobg.png'); position: absolute; top: 525px; width: 1101px; height: 430px; left: -421px; } .infobagcnt{ position:absolute; top:525px; width: 1101px; height: 100%; left: -421px; } h1{ font-size: 27px; color: #fff; text-align: center; } h2{ font-size: 20px; color: #fff; text-align: center; } h3{ font-size: 27px; color: #000000; text-align: center; } .video{ margin: 0 0 25px 80px; } .infob{ font: 90% 'Fira Sans', sans-serif; font-weight: Medium; position: absolute; color: #ffffff; margin: 0 0 0 0; top: 90px; left: 590px; float: left; } .infotren{ background-color: #fff; position: absolute; top: 955px; width: 1101px; height: 570px; left: -420px; } .pol{ background: url('../img/polos.gif'); margin: 25px 0 -15px 0; width: 100%; height: 3px;} .round { border-radius: 100px; /* Радиус скругления */ border: 3px solid #a2a2a2; /* Параметры рамки */ } .blc-inftren{ position: relative; top: -150px; } .inftren{ float: left; position: absolute; top: 120px; left: -55px ; margin: 25px 0 0 25px; padding: 10px; float: left; margin-left: 100px; text-align: center; width: 180px; } .inftren:hover{ width: 180px; height: 280px; background: #0c7df9; border-radius: 25px; } .pol1{ background: url('../img/polos.gif'); margin: 25px 0 -15px 10%; width: 80%; height: 3px;} .pol2{ background: url('../img/polos.gif'); margin: 350px 0 -15px 0; width: 100%; height: 3px;} .inftren1{ float: left; position: absolute; top: 120px; left: 145px ; margin: 25px 0 0 25px; padding: 10px; float: left; margin-left: 100px; text-align: center; width: 180px; } .inftren1:hover{ width: 180px; height: 280px; background: #0c7df9; border-radius: 25px; } .inftren2{ float: left; position: absolute; top: 120px; left: 345px ; margin: 25px 0 0 25px; padding: 10px; float: left; margin-left: 100px; text-align: center; width: 180px; } .inftren2:hover{ width: 180px; height: 280px; background: #0c7df9; border-radius: 25px; } .inftren3{ float: left; position: absolute; top: 120px; left: 145px ; margin: 25px 0 0 25px; padding: 10px; float: left; margin-left: 100px; text-align: center; width: 180px; } .inftren3:hover{ width: 180px; height: 280px; background: #0c7df9; border-radius: 25px; } .inftren4{ float: left; position: absolute; top: 120px; left: 545px ; margin: 25px 0 0 25px; padding: 10px; float: left; margin-left: 100px; text-align: center; width: 180px; } .inftren4:hover{ width: 180px; height: 280px; background: #0c7df9; border-radius: 25px; } .inftren5{ float: left; position: absolute; top: 90px; left: 745px ; margin: 25px 0 0 25px; padding: 10px; float: left; margin-left: 100px; text-align: center; width: 180px; } .inftren5:hover{ width: 180px; height: 280px; background: #0c7df9; border-radius: 25px; } .fi{ font: 90% 'Fira Sans', sans-serif; font-weight: medium; top: 200px; } .btnc{ position: relative; top: 260px; left: 445px; } .btn { position: absolute; -moz-box-shadow:inset 0px 1px 0px 0px #dcecfb; -webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb; box-shadow:inset 0px 1px 0px 0px #dcecfb; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4398ef), color-stop(1, #0c7df9) ); background:-moz-linear-gradient( center top, #4398ef 5%, $0c7df9 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4398ef', endColorstr='#0c7df9'); background-color:#0c7df9; -webkit-border-top-left-radius:0px; -moz-border-radius-topleft:0px; border-top-left-radius:0px; -webkit-border-top-right-radius:0px; -moz-border-radius-topright:0px; border-top-right-radius:0px; -webkit-border-bottom-right-radius:0px; -moz-border-radius-bottomright:0px; border-bottom-right-radius:0px; -webkit-border-bottom-left-radius:0px; -moz-border-radius-bottomleft:0px; border-bottom-left-radius:0px; text-indent:0; border:1px solid #84bbf3; display:inline-block; color:#ffffff; font-family:Arial; font-size:15px; font-weight:bold; font-style:normal; height:40px; line-height:40px; width:200px; text-decoration:none; text-align:center; text-shadow:1px 1px 0px #528ecc; } .btn:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #80b5ea), color-stop(1, #4398ef) ); background:-moz-linear-gradient( center top, #80b5ea 5%, #4398ef 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c7df9', endColorstr='#4398ef'); background-color:#80b5ea; }.btn:active { position:relative; top:1px; } .infcrd{ position: relative; top: 1430px; } .bgcrd{ background: url('../img/cartbg.png'); height: 300px; width: 1100px; top: 95px; left: -420px; position: absolute; } .otz{ background: #fff; position: relative; top: 1680px; left: -420px; height: 300px; width: 1100px; } .pol3{ position: absolute; background: url('../img/polos.gif'); z-index: 10; margin: 50px 0 -15px 0; width: 100%; height: 3px;} .infotz{ position: absolute; top: 30px;left: 490px; } .box_in{ background: #5F9EA0; width:1101px; margin: 0 0 -249px 0; padding-bottom:249px; } .footer{ position:absolute; margin-top:100px; bottom:0; background-color: #f00; width:1101px; height: 249px; } .ftbg{ background: url('../img/footer_pic.png'); position: absolute; width: 300px; height: 249px; } header { background-color: #0f0; } .footer { background-color: #00f; width: 100%; margin: auto; position: fixed; height: 30px; z-index: 1000; } 
 <!DOCTYPE html> <div class="wrapper"> <header> <ul class="Nav-left"> <li> <a href="#" title="">О нас</a> <ul class="submenu"> <li><a href="#">Новости</a></li> <li><a href="#">ФОТО</a></li> <li><a href="#">ВИДЕО</a></li> <li><a href="#">ПАРТНЕРЫ</a></li> <li><a href="#">ВАКАНСИИ</a></li> </ul> </li> <li><a href="#">Акции</a></li> <li><a href="#">Расписание</a></li> </ul> <div class="logo"> <a href="#"><img src="{THEME}/img/logo.png" width="250" height="110" alt="Какая-то картинка"></a> </div> <ul class="Nav-right"> <li><a href="#">Стоимость</a></li> <li><a href="#">Акции</a></li> <li><a href="#">Контакты</a></li> </ul> <div class="infobg"> <a href="#"><img src="{THEME}/img/address_nav_bg.png" width="15" height="20" alt="Ещё какая-то картинка"></a> </div> <span class="info"><br></span> <div class="bgsl"></div> <div class="sliderbg"> <div class="slider"> <input type="radio" name="switch" id="btn1" checked> <input type="radio" name="switch" id="btn2"> <input type="radio" name="switch" id="btn3"> <div class="switch"> <label for="btn1"></label> <label for="btn2"></label> <label for="btn3"></label> </div> <div class="slider-inner"> <div class="slides"> <img src="http://conceptartworld.com/wp-content/uploads/2013/10/Mathieu_Latour-Duhaime_Art_exo-02-small-680x340.jpg"/> <img src="http://conceptartworld.com/wp-content/uploads/2013/10/Mathieu_Latour-Duhaime_Concept_Art_Thief_01-680x340.jpg"/> <img src="http://conceptartworld.com/wp-content/uploads/2013/10/Mathieu_Latour-Duhaime_Concept_Art_Thief_07-680x340.jpg"/> </div> </div> </div> </div> <div class="infobagcnt"> {info}{content} </div> </header> </div> <div class="footer"> <div class="ftbg"> </div> </div>

In the HTML code, notice that the footer has been moved from the header and the wrapper to the body for simplicity. In CSS, the code added only the last 2 styles, everything else is unchanged. If another block is blocked by the footer, then for this block it is necessary to apply the padding-bottom property with a value equal to the footer height.