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.

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

Could you please review my PHP code? I encountered a syntax error: unexpected '}' character. Thank you

Styling the button in jQuery to switch between disabled and enabled

The Canvas element inside a Bootstrap modal is returning inaccurate mouse coordinates

AngularJS has the ability to handle the value of one input based on the value of another input

"Gone in a Scroll: Div vanishes as page moves

Showing no background color until the user lifts their finger

The margins are misaligned on a tablet-sized device due to an issue with the media

Difficulties encountered with CSS transitions when using the background

Creating a mobile-friendly layout with 3 columns: Tips and tricks

Could someone assist me in understanding why VScode is displaying an error stating it cannot locate a module?

What is the best way to retrieve the root binding node from a viewmodel in order to apply jQuery.blockUI when performing an AJAX post request?

Storing user feedback in database using ajax

Validating SASS based on class name

JavaScript Scrolling Functionality Not Functioning as Expected

Tips for automating file uploads in HTML

How to utilize jQuery to eliminate HTML onchange code

Retrieve the child DIV element within its sibling without using an identifier

Conquering challenges arising from organizing subdirectories for js/css/xml files

When the browser window is minimized, the top section of the website becomes concealed

Guide to sending DevExtreme data grids to ASP.NET MVC controllers