title: How do I stretch the slideshow/Carousel in terms of height?
body: <p>HTML and Javascript and I am unable to increase my height of my slideshow/Carousel.</p>
  <p>I have tried changing the height of the #bigbigcontainer and the .slideshow-container but it still doesn't work.</p>
  <p>This is what I am trying to get: <a href="https://i.stack.imgur.com/Tv7cW.png" rel="nofollow noreferrer">Image</a></p>
  <p>This is what I have so far (in this context the javascript is irrelevant):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var slideIndex = 1;
  showSlides(slideIndex);
  
  function plusSlides(n) {
    showSlides(slideIndex += n);
  }
  
  function currentSlide(n) {
    showSlides(slideIndex = n);
  }
  
  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n &gt; slides.length) {slideIndex = 1}    
    if (n &lt; 1) {slideIndex = slides.length}
    for (i = 0; i &lt; slides.length; i++) {
        slides[i].style.display = "none";  
    }
    for (i = 0; i &lt; dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html{
      font-family: Arial, Helvetica, sans-serif;
  }
  h1{
      text-align: center;
  }
  .topnav a {
      display: inline-block;
      color: black;
      background-color: rgb(233, 233, 233);
      text-align: center;
      padding: 5px;
      text-decoration: none;
      font-size: 17px;
      flex: 1;
      border: 3px solid black;
  }
  
  ul{
      display: flex;
      justify-content: center;
      border-left: 2px solid black;
      border-right: 2px solid black;
      border-top: 5px solid black;
      border-bottom: 5px solid black;
      padding: 0;
      background-color: black;
  }
    
   
    
  
  
  body{
      height: 100vh;
      background-image: linear-gradient( rgb(35, 166, 252), white);
     
    }
  
  * {box-sizing: border-box}
  body {font-family: Arial, Helvetica, sans-serif; margin:0}
  .mySlides {display: none;
             
  }
  img {vertical-align: middle;}
  
  
  #bigbigcontainer{
    display: flex;
    flex-direction: column;
    height: 100px;
  
    
  }
  
  
  /* Slideshow container */
  .slideshow-container {
   position: relative;
   width: 50%;
  
  
    
  }
  
  /* Next &amp; previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
   
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
    
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
    
  }
  
  /* Caption text */
  .text {
    color: black;
    font-size: 25px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    height: 80px;
    font-size: larger;
   
    
  }
  
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
   
  }
  
  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    position: relative;
    right: 25%;
  
    
  }
  
  .active, .dot:hover {
    background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link href="mypresent.css" rel="stylesheet"&gt;
      &lt;script src="mypresent.js"&gt;&lt;/script&gt;
      &lt;h1&gt;MY PRESENT&lt;/h1&gt;
      &lt;div class="topnav"&gt;
        &lt;nav&gt;
          &lt;ul&gt;
            &lt;a href="aboutme.html"&gt;About Me&lt;/a&gt;
            &lt;a href="mypast.html"&gt;My Past&lt;/a&gt;
            &lt;a href="mypresent.html"&gt;My Present&lt;/a&gt;
            &lt;a href="myfuture.html"&gt;My Future&lt;/a&gt;
            &lt;a href="feedback.html"&gt;Feedback&lt;/a&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="bigbigcontainer"&gt;
      &lt;div class="slideshow-container"&gt;
  
        
        &lt;div class="mySlides fade"&gt;
          &lt;div class="numbertext"&gt;1 / 2&lt;/div&gt;
          &lt;img src="classphoto.jpg" style="width:100%"&gt;
          
        &lt;/div&gt;
        
        &lt;div class="mySlides fade"&gt;
          &lt;div class="numbertext"&gt;2 / 2&lt;/div&gt;
          &lt;img src="Code.JPG" style="width:100%"&gt;
          
        &lt;/div&gt;
        
        &lt;a class="prev" onclick="plusSlides(-1)"&gt;&amp;#10094;&lt;/a&gt;
        &lt;a class="next" onclick="plusSlides(1)"&gt;&amp;#10095;&lt;/a&gt;
        
  
        
        &lt;/div&gt;
        &lt;br&gt;
        
        &lt;div style="text-align:center"&gt;
          &lt;span class="dot" onclick="currentSlide(1)"&gt;&lt;/span&gt; 
          &lt;span class="dot" onclick="currentSlide(2)"&gt;&lt;/span&gt; 
          
        &lt;/div&gt;
      
    &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>