I am new to coding and building a html page, but my footer is not going to bottom, below is my code. There is some issue with my CSS for footer I guess, can anyone please correct it or guide me how to keep the footer at bottom of the webpage.The footer should be at the bottom not fixed but if there are many contents in my page the footer should go to bottom.
HTML code:
<html>
<head>
<title>Ka</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<h1> Ka </h1>
<ul id="nav">
<li><a class="homered" href="#">Heading</a></li>
<li><a class="homeblack" href="#">heading1</a></li>
<li><a class="homeblack" href="#">heading1</a></li>
<li><a class="homeblack" href="#">heading1</a></li>
<li><a class="homeblack" href="#">heading1</a></li>
<li><a class="homeblack" href="#">heading1 </a></li>
</ul>
</nav>
<a href="kaindex.html" ><span class="langsel" style="color: white">others</span> </a>
</header>
<div class="divider"></div>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/1.jpg" height="60%" width="100%">
</div>
<div class="mySlides fade">
<img src="images/2.jpg" height="60%" width="100%">
</div>
<div class="mySlides fade">
<img src="images/3.jpg" height="60%" width="100%">
</div>
<div class="mySlides fade">
<img src="images/4.jpg" height="60%" width="100%">
</div>
<div class="mySlides fade">
<img src="images/5.jpg" height="60%" width="100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
<div class="page-wrap">
<div class="boxed">
<h2>Ka:</h2>
<p> Kaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. </p>
</div>
<div class="boxed">
<h2>Ka:</h2>
<p> kaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. </p>
</div>
<div class="boxed">
<h2>ka:</h2>
<p> kaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. </p>
</div>
<div class="boxed">
<h2>ma:</h2>
<p> maaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p>
</div>
<div class="boxed">
<h2>la:</h2>
<p> Laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. </p>
</div>
<div class="boxed">
<h2>ca:</h2>
<p> caaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. </p>
</div>
<div class="boxed">
<h2>Ca:</h2>
<p> caaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. </p>
</div>
</div>
<footer class="site-footer">
<p style="copyright">Copyright © aaa </p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/home.js"></script>
</body>
</html>
css code:
html, body{
margin: 0;
padding:0;
height: 100%;
}
header{
background: blue;
color: white;
padding: 8px 0px 6px 40px;
height: 50px;
}
header h1 {
display: inline;
font-family: 'Oswald',sans-serif;
font-weight: 400;
font-size: 32px;
float: left;
margin-top: 0px;
margin-right: 10px;
}
nav ul{
display: inline;
padding: 0px;
float: left;
}
nav ul li{
display: inline-block;
list-style-type:none;
color: white;
float: left;
margin-left: 15px;
}
nav ul li a{
color: white;
text-decoration: none;
}
#nav {
font-family: 'Montserrat', sans-serif;
}
.homered{
background-color: yellow;
padding: 30px 10px 25px 10px;
}
.langsel{
float: right;
}
.divider{
background-color: red;
height: 5px;
}
.homeblack:hover{
background-color: black;
padding: 30px 10px 25px 10px;
}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next {font-size: 11px}
}
.boxed {
float: left ;
border: 5px solid green ;
border-radius: 10px ;
height: 100px;
width: 400px;
padding: 10px;
margin: 30px;
}
.site-footer{
position:absolute;
width:100%;
height:30px; /* Height of the footer */
background:green;
font-weight: bold;
color: white;
font-size:20px;
text-align: center;
font-family: 'Montserrat', sans-serif;
left:0;
bottom:0;
right:0;
margin-bottom: 0px;
}
#rowDiv{
margin:auto;
text-align: center;
width: 100%;
}
input[type="text"]{
height:40px;
font-size:20px;
}
#submitWeather{
height:40px;
font-size:20px;
font-weight: bold;
}
#show{
margin: auto;
width: 60%;
}
#errorCity{
width: 50%;
font-size: 25px;
text-align: center;
margin: auto;
}
