title: HTML, CSS Fullscreen Carousel
body: <p>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.</p>
  
  <p>Here is the CSS: </p>
  
  <pre><code>/* 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;
      }
  </code></pre>