Bootstrap Carousel height to fit screen size - html

Question

I am developing a website for the first time and am get my hands dirty with bootstrap and css. I am using bootstrap carousel and using the basic carousel with 2 slides. However I am not able to style the height of the slides to the height of the screen. I tried adjusting the carousel height to 100% but it is not working right (extends way beyond the screen height). If I give a pixel height, like height: 500px; it works fine. But I want it to fit the entire scree. Any help on how I can achieve this?
HTML:
<div class="container-fluid after-navbar">
<div class="container-fluid ">
<div class="row row-content">
<div class="col-xs-12">
<div id="mycarousel" class="carousel slide carousel-height" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner carousel-height" role="listbox">
<div class="item active carousel-height">
<%= image_tag("bg1.jpg", class: "img-responsive") %>
<div class="carousel-caption">
<h2>BLAH </h2>
</div>
</div>
<div class="item">
<%= image_tag("bg1.jpg", class: "img-responsive") %>
<div class="carousel-caption">
<h2>BLAH</h2>
</div>
</div>
</div>
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
CSS:
.carousel {
background: $bgDefault;
}
.carousel .item {
height: 100%;
}
.carousel .item img {
left: 0;
height: 100%;
position: absolute;
top: 0;
}

Answer 1

Maybe put the height of the carousel at 100% height too, and then add 100% height to the body and html element so it would be:
.carousel{
height:100%;
}
body, html{
height:100%;
}
if this doesnt work then may be add:
.container-fluid.after-navbar{
height:100%;
}
.row-content, .row-content > .col-xs-12{
height:100%;
}