Clear out any unnecessary white space beneath the content on your webpage

Question

Clear out any unnecessary white space beneath the content on your webpage

I am relatively new to Web Development and currently following Colt Steele's udemy course. I have been working on a landing page, but as I try to set the height of HTML to 100%, it leaves whitespace at the bottom. After some research, I suspect that the height of my div container might be causing the issue.

https://i.sstatic.net/uP9MS.jpg

P.S: Switching HTML height to auto resolves the issue, but triggers problems in responsive mode where the navbar size shrinks and doesn't reach the edge of the screen.

 
      body{
        background: url(https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80);
        background-size: cover;
        background-position: center;
        font-family: 'Lato', sans-serif;
        color: white;
        background-repeat: no-repeat;
        border: 1px solid transparent;
      }
      
      html{
          height: auto;
      }
    
      #content{
          text-align: center;
          padding: 25%;
      }
    
      h1{
          font-weight: 700;
          font-size: 5em;
      }

      hr.new1 {
          border-top: 1px solid white;
      }


      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="styles.css">
      <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,700;1,900&display=swap" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

      <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          ...
          
        </nav>

        ...

      </body>

html css bootstrap-4

Answer 1

Answer №1

To ensure the dynamic adjustment of the body when the window size changes, don't forget to include height: 100% in both your body and html CSS properties.

Check out my Chrome View here

Live Demo: (Execute the snippet below and click full screen for a complete image cover on the page with no whitespace.)

Edit: Instead of using custom CSS, Bootstrap offers a variety of native flex box classes. Utilize align-items-center and h-100 for responsive content placement without the need for additional custom CSS padding or margin.

body {
  background: url(https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80);
  background-size: cover;
  background-position: center;
  font-family: 'Lato', sans-serif;
  color: white;
  background-repeat: no-repeat;
  border: 1px solid transparent;
  height: 100%;
}

html {
  height: 100%;
}

body {}

#content {
  text-align: center;
  color: white;
}

h1 {
  font-weight: 700;
  font-size: 5em;
}

hr.new1 {
  border-top: 1px solid white;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PUURFECT MATCH</title>
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,700;1,900&display=swap" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">Puurfect Match</a>
      <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>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <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="#">About</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link" href="#">Contact</a>
          </li>

        </ul>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Sign In
              </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Register
              </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container h-100">
    <div class="row align-items-center h-100">
      <div class="col-lg-12 mx-auto">
        <div id="content">
          <h1>Puurfect Match</h1>
          <h3>The only Human-Feline Dating app</h3>
          <hr class="new1">
          <button class="btn btn-primary btn-lg">Get Started</button>
        </div>

      </div>
    </div>
  </div>
</body>

Answer 2

To ensure the dynamic adjustment of the body when the window size changes, don't forget to include height: 100% in both your body and html CSS properties.

Check out my Chrome View here

Live Demo: (Execute the snippet below and click full screen for a complete image cover on the page with no whitespace.)

Edit: Instead of using custom CSS, Bootstrap offers a variety of native flex box classes. Utilize align-items-center and h-100 for responsive content placement without the need for additional custom CSS padding or margin.

body {
  background: url(https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80);
  background-size: cover;
  background-position: center;
  font-family: 'Lato', sans-serif;
  color: white;
  background-repeat: no-repeat;
  border: 1px solid transparent;
  height: 100%;
}

html {
  height: 100%;
}

body {}

#content {
  text-align: center;
  color: white;
}

h1 {
  font-weight: 700;
  font-size: 5em;
}

hr.new1 {
  border-top: 1px solid white;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PUURFECT MATCH</title>
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,700;1,900&display=swap" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">Puurfect Match</a>
      <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>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <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="#">About</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link" href="#">Contact</a>
          </li>

        </ul>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Sign In
              </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Register
              </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container h-100">
    <div class="row align-items-center h-100">
      <div class="col-lg-12 mx-auto">
        <div id="content">
          <h1>Puurfect Match</h1>
          <h3>The only Human-Feline Dating app</h3>
          <hr class="new1">
          <button class="btn btn-primary btn-lg">Get Started</button>
        </div>

      </div>
    </div>
  </div>
</body>

Clear out any unnecessary white space beneath the content on your webpage

Answer №1

Similar questions

Utilizing modal dialogs in HTML and navigating back to the previous page

Unexpected character appearing in Android 2.3, whether using the li or ul tag

Assign a value to a variable based on the button that was clicked using a form

Is there a way to include an edit, delete, details, and create new icon in an @html.actionLink within MVC?

Adding a border to dynamically generated content while excluding the outer borders using CSS - an easy guide

Customize the font size in Bootstrap 5 using REM units

How do I prevent the default submission behavior in an asp:ImageButton when the user presses the enter key in ASP.NET using C#?

Drawing on Canvas with Html5, shifting canvas results in significant issues

The function setCustomValidity() will continue to display even after the form has been successfully filled out

Why hasn't the string been properly encoded?

The appearance of the drop-down menu in IE is not the same as in other

"Looking for a way to eliminate the background of an image on NextJS? Learn

Increase the size of the embedded iframe in your Cordova application by using the pinch-to-zoom

Issues with 'floating' unordered lists

Positioning of content in bootstrap's navbar and dropdown menus

Tips for sending data from an HTML page to an Angular custom element

The execution of jQuery code from PHP using $.ajax is not functioning properly

Difficulty with Django's |safe template functionality

Problem with stacking order in Internet Explorer 7

Excessive HTML and CSS overflow stretching beyond the boundaries of the page on the right