HTML, CSS Fullscreen Carousel - css

Question

I am having issues with my code for my CSS carousel. I have Javascript just switching some of the classes so I know that is not an issue. My issue is that the height of the image is not scaling the way I would like it to. I want this site to be responsive and the first step is making this fullscreen carousel working. I am making a one pager so I would like to be able to scroll down past the carousel, but when the page initially loads I would like it to show the fullscreen carousel and the NAV bar. The NAV bar is fine right now but the carousel is having issues with the height scaling. As the browser window gets smaller the image will become smaller than the screen, thus it is not fullscreen anymore. I don't mind if some of the image is cut off but I would like the carousel to always be full screen unless the user scrolls down or clicks on a link to an anchor point.
Here is the CSS:
/* General */
*{
box-sizing:border-box;
}
html {
margin:0;
padding:0;
width:100vw;
/* min-height:100vh;
*/
}
body {
width:100%;
max-width:100%;
min-height:100vh;
margin:0;
padding:60px 0 0 0;
background-color:#333333;
font-family: 'Varela Round', sans-serif;
}
/* ***Menu CSS*** */
/* -------------------------------------------
Nav bar
------------------------------------------- */
nav {
background-color:rgba(22,22,22,0.7);
position:fixed;
top:0;
left:0;
right:0;
height: 60px;
text-align:center;
z-index:2;
}
nav:after {
content:"";
position:absolute;
top:0;
right:0;
width:0;
height:0;
border-style:solid;
border-width:0 60px 60px 0;
border-color:transparent #50C0C0 transparent transparent;
}
nav a {
text-decoration:none;
color:initial;
}
nav .navButton {
display:inline-block;
color:#50C0C0;
line-height:60px;
padding:0 50px;
position: relative;
}
nav .navButton:after {
content:"";
transition:width .5s, left .5s;
-webkit-transition:width .5s, left .5s;
-moz-transition:width .5s, left .5s;
-o-transition:width .5s, left .5s;
width:0;
left:50%;
}
nav .navButton:hover:after {
content:"";
left:20%;
height:1.5px;
width:60%;
background-color:#50C0C0;
position:absolute;
bottom:0;
box-shadow: 0 -3px 15px #ffffff;
}
/* div around all nav buttons */
nav .buttonWrapper {
display:inline-block;
text-align:center;
}
/* ***Carousel css*** */
/* -------------------------------------------
Carousel
------------------------------------------- */
.carousel {
width:100%;
position:relative;
height: 100%;
}
.carousel .imageContainer {
position:absolute;
transition:width .5s;
-webkit-transition:width .5s;
-moz-transition:width .5s;
-o-transition:width .5s;
overflow:hidden;
width:100%;
}
.carousel .imageContainer img {
width: 100vw;
min-width:100%;
min-height:100%;
}
.carousel .imageContainer.closed {
width:0;
}
.carousel .imageContainer.open {
width:100%;
}
.carousel .imageContainer.fromRight {
right:0;
}
.carousel .imageContainer.fromLeft {
left:0;
}

Answer 1

in order to keep your carousel full screen you need to set the width = 100% ( of course ), and have the height at 100vh, this will maintain the height of the carousel 100% height of the viewport. Should do the trick.
#carousel{
position:relavite;
display:block;
width:100%;
margin-top:70px;
height:calc(100vh - 70px);
background:#000 url('http://lorempixel.com/1100/1100/sports/') no-repeat top center;
background-size:cover;
z-index:1;
}
*you may consider to set the images on of your carousel as background images and set the size to cover. On my example, i subtracted the height of the nav, so the carousel can be rest of the height and pushed it down with margin.
you can preview here:
https://plnkr.co/edit/4AsQ3PoM0Ze2gOFENsVG?p=preview