Setting image height to 100vh causes overlap with other elements

Question

I am trying to create a page using Bootstrap 4 that has a header, footer and main content. The main content should fill the space below the header and the footer should be below this.

I have tried to do this by setting 100vh height on the main content, this works but when I insert an image it is overlapping the footer. Where am I going wrong? Why is the image not resizing?

#content-header {
  background: red;
  color: white;
}

#content-main {
  background: blue;
  color: white;
  height: 100vh;
}

#content-header {
  background: red;
  color: white;
}






  
    
      
        Navbar
      
    
    
      Main Content
      
    
    
      Footer Content

user_4095056 · Answer

add min-height insted of height

#content-main {
  background: blue;
  color: white;
  min-height: 100vh;
}

#content-header {
  background: red;
  color: white;
}

#content-main {
  background: blue;
  color: white;
  min-height: 100vh;
}

#content-header {
  background: red;
  color: white;
}






  
    
      
        Navbar
      
    
    
      Main Content
      
    
    
      Footer Content

user_7796745 · Answer

Try this code. I added max-width: 100% and height: auto to the image

 #content-header {
    background:red;
    color:white;
   }
   #content-main {
    background:blue;
    color:white;
    height:100vh;
   }
   #content-header {
    background:red;
    color:white;
   }
            #background-img{
                max-width: 100%;
                height: auto;
            }




  
   
    
    
    
     
    
      Navbar
     
     
    
    

    
                    
     Main Content
     

    

    
    
     Footer Content

user_13229607 · Answer

Please change height: 100vh to height: 100%

#content-main {
  background: blue;
  color: white;
  height: 100%;
}

user_13056220 · Answer

You are question is right. Because you are set main-content height 100vh, but if you observe that you are image size is more then screen height. You are screen size will 700px to 800px, but image size is 1000px. So your image is overlap to footer.

user_171456 · Answer

You want the entire layout to be 100% height, not just #content-main.

Therefore, you want to set min-height:100vh (min-vh-100) on the #content. Then, the flex-grow-1 will allow main to fill the height between nav and footer:


    
        
             Navbar 
        
        
            Main Content
            
        
         Footer Content

https://codeply.com/p/gnLCSZG9gy

Setting image height to 100vh causes overlap with other elements

5 Answers