Removing Whitespace below the content in Webpage

Question

So I am relatively new to Web Development and am following Colt Steele's udemy course, I started doing this landing page but towards the end when I try to set the height of HTML to 100% and then there's like whitespace down. I have tried to search for a reason and I think my div container's height is causing some issues.

P.S: I also tried to make the HTML height auto which worked fine, but then again causes an issue in responsive mode, and even the navbar size decreases and doesn't cover to the end 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;
    }


    
    
    
    

    

    
      
        Puurefect Match
        
      
        
          
            
              Home (current)
            
            
              About
            
            
                Contact              
            
            
          
          
              
                  Sign In
                  
              
              
                  Register
                  
              
          
          
        

      
        
    

    
        
            
                
                    Puurefect Match
                    The only Human-Feline Dating app

user_13669048 · Answer

You need to add height: 100% to your body and html as well to make sure the body changes dynamically when window size changes.

My Chrome View

Live Demo: (Run snippet below and click full screen to see the image is cover in the page and there is no white space.)

Edit: Bootstrap has its own alot of native flex box classes which you can use instead of custom CSS. We can just use align-items-center and h-100 to make sure about content text stays in middle and good things it will be repsonsive as well. We do not need to use any Custom CSS padding or margin on content.

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;
}





  
  
  PURFECT MATCH
  
  
  
  




  
    
      Puurefect Match
      

      
        
          
            Home (current)
          
          
            About
          
          
            Contact
          

        
        
          
            Sign In
              
          
          
            Register
              
          
        
      
    
  

  
    
      
        
          Puurefect Match
          The only Human-Feline Dating app

Removing Whitespace below the content in Webpage

1 Answers