I am relatively new to HTML and CSS, and I know this question has been asked many times. But I haven’t found a solution that works. My project partner sent me this HTML footer code which I have to put at the bottom of our website. The lone HTML file itself works when I open it on a browser.
<!DOCTYPE html>
<html>
<style>
.footer-dark {
padding:50px 0;
color:#f0f9ff;
background-color:#0a384b;
}
.footer-dark h3 {
margin-top:0;
margin-bottom:12px;
font-weight:bold;
font-size:16px;
}
.footer-dark ul {
padding:0;
list-style:none;
line-height:1.6;
font-size:14px;
margin-bottom:0;
}
.footer-dark ul a {
color:inherit;
text-decoration:none;
opacity:0.6;
}
.footer-dark ul a:hover {
opacity:0.8;
}
@media (max-width:767px) {
.footer-dark .item:not(.social) {
text-align:center;
padding-bottom:20px;
}
}
.footer-dark .item.text {
margin-bottom:36px;
}
@media (max-width:767px) {
.footer-dark .item.text {
margin-bottom:0;
}
}
.footer-dark .item.text p {
opacity:0.6;
margin-bottom:0;
}
.footer-dark .item.social {
text-align:center;
}
@media (max-width:991px) {
.footer-dark .item.social {
text-align:center;
margin-top:20px;
}
}
.footer-dark .item.social > a {
font-size:20px;
width:36px;
height:36px;
line-height:36px;
display:inline-block;
text-align:center;
border-radius:50%;
box-shadow:0 0 0 1px rgba(255,255,255,0.4);
margin:0 8px;
color:#fff;
opacity:0.75;
}
.footer-dark .item.social > a:hover {
opacity:0.9;
}
.footer-dark .copyright {
text-align:center;
padding-top:24px;
opacity:0.3;
font-size:13px;
margin-bottom:0;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="footer-dark">
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 item">
<h3>Services</h3>
<ul>
<li><a href="#">Consultation</a></li>
<li><a href="#">Confinement</a></li>
<li><a href="#">Other Services</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3 item">
<h3>About</h3>
<ul>
<li><a href="#">Doctors</a></li>
<li><a href="#">Partner Hospitals</a></li>
<li><a href="#">Offers</a></li>
</ul>
</div>
<div class="col-md-6 item text">
<h3>St. San Vitores Hospital</h3>
<p>Your health is our priority. </p>
</div>
<div class="col item social"><a href="#"><i class="icon ion-social-facebook"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-instagram"></i></a></div>
</div>
<p class="copyright">St. San Vitores Hospital © 1980 </p>
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
However, I have to incorporate his code into our main file. I put the contents inside < div class="footer-dark" > in our index.html file, and the content inside the < style > tag in our index.css file.
CSS
@media screen and (max-width: 1240px) {
.container a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
html {
height: 100%;
box-sizing: border-box;
}
body {
height: 100%;
min-height: 100%;
min-height: 100vh;
display:flex;
flex-direction:column;
}
/* other content of the website*/
footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
.footer-dark {
padding:50px 0;
color:#f0f9ff;
background-color:#0a384b;
}
.footer-dark h3 {
margin-top:0;
margin-bottom:12px;
font-weight:bold;
font-size:16px;
}
.footer-dark ul {
padding:0;
list-style:none;
line-height:1.6;
font-size:14px;
margin-bottom:0;
}
.footer-dark ul a {
color:inherit;
text-decoration:none;
opacity:0.6;
}
.footer-dark ul a:hover {
opacity:0.8;
}
@media (max-width:767px) {
.footer-dark .item:not(.social) {
text-align:center;
padding-bottom:20px;
}
}
.footer-dark .item.text {
margin-bottom:36px;
}
@media (max-width:767px) {
.footer-dark .item.text {
margin-bottom:0;
}
}
.footer-dark .item.text p {
opacity:0.6;
margin-bottom:0;
}
.footer-dark .item.social {
text-align:center;
}
@media (max-width:991px) {
.footer-dark .item.social {
text-align:center;
margin-top:20px;
}
}
.footer-dark .item.social > a {
font-size:20px;
width:36px;
height:36px;
line-height:36px;
display:inline-block;
text-align:center;
border-radius:50%;
box-shadow:0 0 0 1px rgba(255,255,255,0.4);
margin:0 8px;
color:#fff;
opacity:0.75;
}
.footer-dark .item.social > a:hover {
opacity:0.9;
}
.footer-dark .copyright {
text-align:center;
padding-top:24px;
opacity:0.3;
font-size:13px;
margin-bottom:0;
}
html {
scroll-behavior: smooth;
}
The footer contents overlap some contents in the middle of the webpage. However, when I minimize the browser, the footer actually goes to the bottom. How do I make it stay at the bottom of the webpage regardless of the size of the browser?
2
Answers
From html and also from the index.css it works for me by adding these 2 lines to .footer-dark:
And remember
in the head section of your html.
Try adding the fixed position and the bottom style to your footer-dark class