1

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

enter image description here

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

Yasir Bilal
  • 57
  • 1
  • 6
  • 1
    Hard to say without the css or the website. You can use the inspector to determine where is the problem. – crg May 21 '21 at 10:54
  • does [this](https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height) answer your question? – ozerodb May 21 '21 at 10:55
  • crg I add a new screenshot with a black circle pointing to my problem – Yasir Bilal May 21 '21 at 11:02
  • You may refer to this article [How to keep your footer where it belongs ?](https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/#:~:text=A%20footer%20is%20the%20last,is%20taller%20than%20the%20viewport.) – Jing Xian May 21 '21 at 11:12

5 Answers5

0

What about:

footer {
    position: fixed;
    width: 100%;
    bottom: 0px;
}

.container-fluid{
  margin-bottom: 100px; //Height of your footer
}

Fiddle

alexP
  • 3,427
  • 5
  • 22
  • 34
0

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%;
        }
    }
m1crdy
  • 1,341
  • 2
  • 25
  • 56
0

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.

swervo
  • 719
  • 5
  • 14
0

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");
}
Burak Özcan
  • 1
0

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/

Thomas O'Gara
  • 3
  • 1