Topic: footer on bottom not working
?????? How to ????
the footer doesn't stay at bottom of a page when the page is empty
????
Gus
Add comment
Hi,
if you have intro with
.full-bg-img class, you can use position: relative setting, like here:
<!DOCTYPE html>
<html lang="en" class="full-height">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<style type="text/css">
footer {
bottom: 0;
position: relative;
width: 100%;
}
.intro-2 {
background: url("https://mdbootstrap.com/img/Photos/Others/architecture.jpg")no-repeat center center;
background-size: cover;
}
</style>
</head>
<body>
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark indigo">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<!-- Links -->
<!-- Search form -->
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
<!-- Collapsible content -->
</nav>
<!--/.Navbar-->
<!--Intro Section-->
<section class="view intro-2 hm-purple-light">
<div class="full-bg-img">
<div class="container flex-center">
<div class="row flex-center">
<div class="col-md-10 col-lg-6 text-center text-md-left margins">
<div class="white-text">
<h1 class="h1-responsive font-bold mt-sm-5 wow fadeInLeft" data-wow-delay="0.3s">Make purchases with our app </h1>
<hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
<h6 class="wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt
dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae
iste.
</h6>
<br>
<a class="btn btn-white dark-grey-text font-bold wow fadeInLeft" data-wow-delay="0.3s">Download
<a class="btn btn-outline-white wow fadeInLeft" data-wow-delay="0.3s">Learn more</a>
</a>
</div>
</div>
<div class="col-md-6 col-lg-6 hidden-md-down wow fadeInRight d-flex justify-content-center" data-wow-delay="0.3s">
<img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/admin-new.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</section>
</header>
<main>
<div class="container my-5 pt-5">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</main>
<!--Footer-->
<footer class="page-footer blue center-on-small-only">
<!--Footer Links-->
<div class="container-fluid">
<div class="row">
<!--First column-->
<div class="col-md-6">
<h5 class="title">Footer Content</h5>
<p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<!--/.First column-->
<!--Second column-->
<div class="col-md-6">
<h5 class="title">Links</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
<!--/.Second column-->
</div>
</div>
<!--/.Footer Links-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2015 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
</body>
</html>
Best,
Marta
Hi,
I'm not sure what you mean. Could you explain this more clearly and provide any demo or your code?
Best,
Marta
Cameron Owen priority commented 6 years ago
I'm having the same issue. Once you set the position to absoulute, if you have the footer on the same page as "full-bg-img" the footer will sit on top and cut off your full background. Essentially what I'm trying to do is get the footer to sit under the content on the page unless there is no or limited content in which case the footer should be stuck to the bottom.
Hi,
Add to your CSS file this code:
footer.page-footer {
position: absolute;
bottom: 0;
width: 100%;
}newtongamajr pro commented 6 years ago
Hi, When I add this CSS to the footer it passes an overlapping to the content according the page scroll. What can I do?FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags