How to make Navbar and Carousel combined always full screen

Question

I want to have a nav-bar at the top of my page. Below that I want my carousel which should always take up the entire remaining screen.

This is my navbar:

Answer 1

Image ratio isn't the same viewport ratio. It very difficult to make this work without using background images...

You need to consider what happens when the viewport and image ratios are not equal...

• Do you want the images to be clipped off screen?
• Shrink to fit screen width or height (required to maintain aspect ratio)?
• Stretch to fit (resulting in warped images that lose aspect ratio)?

Option 1

In order to make the carousel fill the remaining height under that navbar, use flex-grow:1. Then, clip the image sides when they're too wide for the screen (viewport width). This allows the images to fill height, but not lose their aspect ratio.

Demo: https://www.codeply.com/p/5QnXTjbOFL

CSS

/* make active item container fill height of viewport using flexbox */
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
    flex: 1 0 100%;
}

/* fix transitioning item height */
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right,
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
    flex: 0 0 0;
}

/* make images fill height and width or clip */
.carousel-item {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.img-1 {
    background-image: url(..);
}

.img-2 {
    background-image: url(..);
}

HTML

    

        
            
        
        Navbar
        

            

                

                    Link
                
            
        
    
    

        

            

            
            

            
        
    

Option 2

If you must use images, you can get object-fit to work without using the flexbox that was used in Option 1. Use calc to determine the height of the carousel (minus the Navbar height of 56px). This will prevent vertical scrollbar...

/* make images fill height and width or clip */
.carousel-item > img {
    object-fit: cover;
    height: calc(100vh - 56px);
    width: 100%;
}

Demo 2: https://www.codeply.com/p/HR6phylC7q

---

Also see: Bootstrap Carousel Full Screen