I have this footer I'm working on, and I just can't figure out how to move it to the bottom,
can somebody help me please??
Thank you
I tried changing the top value in CSS, etc
nothing has worked so far
.footer-dark {
padding:30px 0;
color:#f0f9ff;
background-color:#282d32;
}
.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:160px;
opacity:0.3;
font-size:13px;
margin-bottom:-2;
position: absolute;
right: 47%;
top: 17%;
}
.container {
...
position: relative;
}
.child {
...
position: absolute;
top: 20%;
left: 90%;
transform: translate(-30%, 0%);
width: 2809px;
}
html, body {
overflow-x: hidden;
overflow-y: hidden;
}<head>
<meta charset="utf-8"> <!-- dont copy -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- dont copy -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"> <!-- copy -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"> <!-- copy -->
<link rel="stylesheet" href="assets/css/style.css"> <!-- dont copy -->
</head>
<div class="container">
<div class="child">
<div class="footer-dark">
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 item">
<h3>Products</h3>
<ul>
<li><a href="#">Ɀinexium Exploit</a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div class="col-md-6 item text">
<h3>Ɀinexium</h3>
<p>Welcome to Ɀinexium, your #1 source for free exploits!
We're dedicated to providing you the very best of Roblox Cheats, with an emphasis on Roblox Cheats, Excellent Service, and it's completely free!
Founded in 2020 by Anakoni, Ɀinexium has come a long way from its beginnings. We hope you enjoy our products as much as we enjoy offering them to you. If you have any questions or comments, please don't hesitate to contact us.</p>
</div>
<div class="col item social"><a href="https://github.com/Zinexium" target="_blank"><i class="icon ion-social-github"></i></a>
</div>
<p class="copyright">Ɀinexium, 2020-21<br />Not Copyrighted</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>
</div>
</div>
<!-- Credit to https://epicbootstrap.com/snippets/footer-dark -->As you can see there is not much content to cover the full viewport. So to cover the full screen you have to give body height must be minimum 100vh like this:
body {
min-height: 100vh;
}
body>.container {
position:fixed;
bottom: 0;
left: 0;
width: 100%;
}
See full snippet below.
body{
min-height: 100vh;
}
body>.container {
position:fixed;
bottom: 0;
left: 0;
width: 100%;
}
.footer-dark {
padding:30px 0;
color:#f0f9ff;
background-color:#282d32;
}
.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:160px;
opacity:0.3;
font-size:13px;
margin-bottom:-2;
position: absolute;
right: 47%;
top: 17%;
}
.container {
...
position: relative;
}
.child {
...
position: absolute;
top: 20%;
left: 90%;
transform: translate(-30%, 0%);
width: 2809px;
}
html, body {
overflow-x: hidden;
overflow-y: hidden;
}<head>
<meta charset="utf-8"> <!-- dont copy -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- dont copy -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"> <!-- copy -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"> <!-- copy -->
<link rel="stylesheet" href="assets/css/style.css"> <!-- dont copy -->
</head>
<div class="container">
<div class="child">
<div class="footer-dark">
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 item">
<h3>Products</h3>
<ul>
<li><a href="#">Ɀinexium Exploit</a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div class="col-md-6 item text">
<h3>Ɀinexium</h3>
<p>Welcome to Ɀinexium, your #1 source for free exploits!
We're dedicated to providing you the very best of Roblox Cheats, with an emphasis on Roblox Cheats, Excellent Service, and its completely free!
Founded in 2020 by Anakoni, Ɀinexium has come a long way from its beginnings. We hope you enjoy our products as much as we enjoy offering them to you. If you have any questions or comments, please don't hesitate to contact us.</p>
</div>
<div class="col item social"><a href="https://github.com/Zinexium" target="_blank"><i class="icon ion-social-github"></i></a>
</div>
<p class="copyright">Ɀinexium, 2020-21<br />Not Copyrighted</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>
</div>
</div>
<!-- Credit to https://epicbootstrap.com/snippets/footer-dark -->