How to make Navbar and Carousel combined always full screen - html

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:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/artworks">Artworks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/collection">Fashion Collection</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact me</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<a class="navbar-brand" href="/">
<img src="/images/logo.png" height="30" class="d-inline-block align-top" alt="">
</a>
</form>
</div>
</nav>
and this is my carousel:
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/test.jpg" class="d-block w-100" alt="...">
<a href="/artworks">
<div class="carousel-caption d-none d-md-block carousel-title ">
<h1>Get to my artworks...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="/images/test.jpg" class="d-block w-100" alt="...">
<a href="/collection">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Get to my fashion collection...</h1>
<p>Lorem ipsum dolor sit amet </p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="/images/test.jpg" class="d-block w-100" alt="...">
<a href="/blog">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Get to my blog...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="/images/test.jpg" class="d-block w-100" alt="...">
<a href="/about">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Read some stuff about me...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="/images/test.jpg" class="d-block w-100" alt="...">
<a href="/contact">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Contact me...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
More or less these snippets are directly taken from the bootstrap website. Those are just adjusted for my purposes. So how do I make the carousel take up the entire screen below the nav-bar? Any ideas?

Answer 1

Add this css
.carousel { height: calc(100vh - 56px);}
.carousel-inner,.carousel-item { height: 100%;}
.carousel-item { background-color: #000;}
.carousel-item img { height: 100%; object-fit: cover; object-position: center;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/artworks">Artworks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/collection">Fashion Collection</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact me</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<a class="navbar-brand" href="/">
<img src="/images/logo.png" height="30" class="d-inline-block align-top" alt="">
</a>
</form>
</div>
</nav>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
<a href="/artworks">
<div class="carousel-caption d-none d-md-block carousel-title ">
<h1>Get to my artworks...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
<a href="/collection">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Get to my fashion collection...</h1>
<p>Lorem ipsum dolor sit amet </p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
<a href="/blog">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Get to my blog...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
<a href="/about">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Read some stuff about me...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
<a href="/contact">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Contact me...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Answer 2

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
<div class="container-fluid d-flex min-vh-100 flex-column px-0 justify-content-center">
<nav class="navbar navbar-expand-md navbar-light bg-light flex-shrink-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div id="carouselExampleControls" class="carousel slide flex-fill d-flex flex-column justify-content-center" data-ride="carousel">
<div class="carousel-inner flex-fill d-flex flex-column">
<div class="carousel-item active img-1">
</div>
<div class="carousel-item mg-2">
</div>
</div>
</div>
</div>
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