Need to fix my footer to the bottom - html

Question

I am trying to put a footer at the bottom of the page.
I am unable to make this page's footer correct.
I tried a lot tips and trick that I found but nothing helped me.
I do not want the position fixed, I want the footer under the content.

Answer 1

Add this too your footer style:
position: fixed;
bottom: 0;
z-index: 10;
Entire style sheet:
/*!
* Start Bootstrap - Half Slider (http://startbootstrap.com/template-overviews/half-slider)
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-half-slider/blob/master/LICENSE)
*/
html, body { height: 100%; width: 100%; margin: 0;
}
footer{display: block;color: white;width: 100%;background-color: rgb(28,28,28);text-align: center;padding: 10px;position: fixed;bottom: 0;z-index: 10;}
.cock {
}
.telicko {
height: 95.5%;
}
.sicko {
width: 100%;
height: 80%;
position: absolute;
top: 5%;
}
.snavik{
float: left;
margin-top:8vh;
}
.nav {
list-style-type: none;
text-decoration:none;
}
.jednicka a.active{
background-color: rgb(50,134,171);
color: white;
border-radius: 3px;
}
.dvojka a.active{
background-color: rgb(202,76,77);
color: white;
border-radius: 3px;
}
.trojka a.active{
background-color: rgb(219,162,10);
color: white;
border-radius: 3px;
}
.stvorka a.active{
background-color: rgb(132,177,58);
color: white;
border-radius: 3px;
}
.patka a.active{
background-color: black;
color: white;
border-radius: 3px;
}
.jednicka a {
color: black;
}
.dvojka a {
color: black;
}
.trojka a {
color: black;
}
.stvorka a {
color: black;
}
.patka a {
color: black;
}
.jednicka:hover a {
background-color: rgb(50,134,171);
color: white;
border-radius: 3px;
}
.dvojka:hover a{
background-color: rgb(202,76,77);
color: white;
border-radius: 3px;
}
.trojka:hover a{
background-color: rgb(219,162,10);
color: white;
border-radius: 3px;
}
.stvorka:hover a{
background-color: rgb(132,177,58);
color: white;
border-radius: 3px;
}
.patka:hover a{
background-color: black;
color: white;
border-radius: 3px;
}
.objb{
margin-bottom: 2%;
margin-top: 2%;
}
.sobrazky {
margin-top: 4%;
margin-bottom: 7vh;
}
.objbb {
margin-top: 2%;
margin-bottom: 1%;
}
.odpovede {
margin-top:8vh;
margin-left: 20vw;
height: 100%;
width: 70%;
}
.ulicko {
margin-left: -26px;
}
.carousel-item {
height: 50vh;
min-height: 150px;
width: 100%;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0 auto;
}
#PART1{
padding: 0;
margin: 0;
width: 80%;
height: 25%;
margin: 0 auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
-webkit-box-align: center;
}
#PART2a{
padding: 0;
margin: 0;
width: 100%;
height: 25%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
-webkit-box-align: center;
position: absolute;
top: 45%;
left: 25%;
transform: translate(-50%, -50%);
}
#PART2b{
padding: 0;
margin: 0;
width: 100%;
height: 25%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
-webkit-box-align: center;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}
.smenu{
position: absolute;
top: 15%;
left: 3%;
}
.snav {
list-style-type: none;
}
.nav-item a:hoover{
color: rgb(236,212,146);
}
.uo {
width: 40%;
display: block;
margin-top: 40%;
}
.medzera {
height: 5vh;
width: 100%;
}
.tretiavec {
width: 35%;
padding-left: 5%;
}
.krok1{
display: flex;
align-items: center;
justify-content: center;
font-size: 150%;
color: black;
border:2px solid rgb(216,192,126);
width: 60px;
height: 60px;
border-radius: 100%;
margin: 0 auto;
background-color: rgb(236,212,146);
}
.krok2{
display: flex;
align-items: center;
justify-content: center;
font-size: 150%;
color: black;
border:2px solid rgb(216,192,126);
width: 60px;
height: 60px;
border-radius: 100%;
margin: 0 auto;
background-color: rgb(236,212,146);
}
.krok3{
display: flex;
align-items: center;
justify-content: center;
font-size: 150%;
color: black;
border:2px solid rgb(216,192,126);
width: 60px;
height: 60px;
border-radius: 100%;
margin: 0 auto;
background-color: rgb(236,212,146);
}
.txta {
width: 20vw;
height: 15vh;
}
.formularo {
position: absolute;
top: 10%;
left:10%;
margin-top: 2%;
padding-bottom: 7%;
width: 80vw;
display: flex;
}
.idd{
text-align: center;
}
.contactformularo{
border-right: 2px solid black;
width: 33%;
padding-right: 5%;
}
.objto {
margin: 0 auto;
margin-top: 10vh;
}
.lolo {
text-align: center;
}
.containerch {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width:100%;
}
.chbox1, .chbox2, .chbox3, .chbox4, .chbox5 {
position: absolute;
opacity: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 3px;
}
#checkmark1{
border: 1px solid rgb(50,134,171);
}
#checkmark2{
border: 1px solid rgb(202,76,77);
}
#checkmark3{
border: 1px solid rgb(219,162,10);
}
#checkmark4{
border: 1px solid rgb(132,177,58);
}
#checkmark5{
border: 1px solid black;
}
.containerch:hover input ~ .checkmark {
background-color: #ccc;
}
.containerch input:checked ~ #checkmark1 {
background-color: rgb(50,134,171);
}
.containerch input:checked ~ #checkmark2 {
background-color: rgb(202,76,77);
}
.containerch input:checked ~ #checkmark3 {
background-color: rgb(219,162,10);
}
.containerch input:checked ~ #checkmark4 {
background-color: rgb(132,177,58);
}
.containerch input:checked ~ #checkmark5 {
background-color: black;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.containerch input:checked ~ .checkmark:after {
display: block;
}
.containerch .checkmark:after {
left: 7px;
top: 3px;
width: 40%;
height: 65%;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.answerhos {
}
.modind {
overflow: inherit;
}
.iu {
cursor:pointer
}
.iui {
width: 18vh;
height: 18vh;
border-radius: 100px;
top: 5vh;
display:flex;
justify-content:center;
align-items:center;
margin-left: auto;
margin-right:auto;
}
.modind .hosind .promind .kompind {
width: 100%;
}
.ciarka {
margin-top: 10%;
}
.iuii {
width: 115px;
height:115px;
border-radius: 100px;
top: 5vh;
display: flex;
justify-content:center;
align-items:center;
margin-left: auto;
margin-right:auto;
}
.objednavkaformularo{
float: right;
padding: 5%;
border-right: 2px solid black;
vertical-align: middle;
}
.iui img{
vertical-align:middle;
display:inline-block;
}
.iuii img {
}
.idd {
font-size: 20px;
font-weight: bold;
}
.textik {
font-size: 16px;
width: 60%;
height: 1vh;
margin: 0 auto;
}
.resized {
display: none;
}
.penisnadpis {
margin-left: 1%;
color: rgb(236,212,146);
}
/* pokus o responsivitu */
#media only screen and (max-width: 700px) {
body {
}
#PART1 {
display: none;
}
footer {
position: fixed;
bottom: 0;
}
.uo{
margin-top: 0%;
}
.penisnadpis {
margin-left: 0%;
}
.iui {
float: left;
margin-left: 10vw;
}
.iuii {
float: left;
margin-left: 10vw;
}
.uo {
display: none;
}
.resized {
display: block;
margin-top: 5%;
margin-bottom: 20%;
width: 100%;
}
.texticek {
font-size: 17px;
}
.ibutton {
margin-top:5vh;
}
}
#media only screen and (max-width: 1100px) {
body {
}
#PART1 {
width: 100%;
}
}
#media only screen and (max-width: 1550px) {
body {
background-color:
}
.textik {
width: 85%;
}
#PART1{
width: 90%;
}
}
#media only screen and (max-width: 1000px) {
body {
background-color:
}
#PART1{
width:100%;
}
.textik {
width:95%;
font-size: 13px;
}
.uo {
margin-top: 40%;
}
}
#media only screen and (max-height: 600px) {
body {
}
.telicko {
height:100%;
}
footer {
margin-top: 3%;
}
}