White Space at bottom of page
Question
I'm trying to create a page without scroll and I don't have much content to show on the page while I'm designing a web page I face an issue I try to search and try to follow the step to solve the issue but my issue does not solve so if anyone can help me
the issue I'm facing white space at the bottom of my page after the footer I'm sharing example code with my issue
screenshot of the issue you can see white space right after the footer
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Document</title>
<style>
.img-thumbnail{
height: 150px;
width: 100%;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row d-flex flex-row flex-nowrap">
<div class="col-12 p-0">
<div class="card">
<h4 class="font-weight-light text-center">Bootstrap 4 Horizontal Scrolling Cards with Flexbox</h4>
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-lg-3 col-md-12 col-sm-12">
<img src="AboutUs.jpeg" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-lg-9 col-md-12 col-sm-12">
<h4>Lorem ipsum dolor sit, amet consectetur</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum, architecto magni? Rem, ipsam ipsa sit, maxime deserunt officiis consequatur cumque libero illum consectetur illo maiores iusto pariatur sapiente necessitatibus magni?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum,
<a href="" class="text-center text-warning float-right pr-5">Read More</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-lg-3 col-md-12 col-sm-12">
<img src="AboutUs.jpeg" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-lg-9 col-md-12 col-sm-12">
<h4>Lorem ipsum dolor sit, amet consectetur</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum, architecto magni? Rem, ipsam ipsa sit, maxime deserunt officiis consequatur cumque libero illum consectetur illo maiores iusto pariatur sapiente necessitatibus magni?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum,
<a href="" class="text-center text-warning float-right pr-5">Read More</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="bg-dark-08">
<div class="container-fluid p-0 m-0 bg-dark">
<div class="row no-gutters text-center d-flex justify-content-center">
<div class="p-2">
<p class="text-light text-center">Example Address</p>
<p class="text-light text-center">example@example.com</p>
</div>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>
Thank you
5 answers
solution1
0 2021-05-21 11:03:50
What about:
footer {
position: fixed;
width: 100%;
bottom: 0px;
}
.container-fluid{
margin-bottom: 100px; //Height of your footer
}
solution2
0 2021-05-21 11:04:58
You should make use of the @media query. If the screen is smaller than your content, make the footer relative. If the screen is bigger than your content, use position absolute.
footer{
position:relative;
}
@media screen and (min-height:800px){
footer{
position: absolute; // or fixed
bottom:0;
width:100%;
}
}
solution3
0 2021-05-21 11:07:19
html, body { margin: 0; padding: 0; }.mainContainer { display: flex; min-height: 100vh; flex-direction: column; } header { width: 100%; height: 100px; background: blue; }.mainContent { flex: 1; text-align: center; font-size: 40px; padding: 40px; } footer { width: 100%; height: 100px; background: red; }
<html> <head></head> <body> <div class='mainContainer'> <header></header> <div class='mainContent'> All your content goes here </div> <footer></footer> </div> </body> </html>
This should work for you. Basically make the page a vertical flexbox with min-height: 100vh and flex the middle element. Then the footer is always anchored to the bottom of the page.
solution4
0 2021-05-21 11:08:06
Because, you dont have much content to fill entire page. You can use something like this.
if($(window).height() > $("body").height()){
$("footer").css({"position" : "fixed", "bottom" : "0" , "width" : "100%"});
} else {
$("footer").css("position", "relative");
}
solution5
0 2021-05-21 11:08:28
This looks like bootstrap. Try having a look at the sample code they provide for this kind of thing. Specifically, there is a sticky footer example https://getbootstrap.com/docs/4.0/examples/sticky-footer/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.