title: responsive height doesnt work and cant find the correct answer
body: <p>Hi I have a question and I cant find an answer that works on here.
  I am making a simple portfolio site with a slideshow in it. The slideshow has arrows &amp; also those little dots/numbers underneath to pick which photo to go to. 
  Im now trying to make the box ("main") fit the height of the screen so my slideshow is responsive (arrows at the bottom of the screen instead of on the sides when you make the screen smaller). However, im having a lot of trouble! Somehow my main is bigger then the height of my screen, so there always appears a scroller. I don't know how I can solve this. How do I make my main the full height of my screen? On mobile it's not even half screen and on my laptop it's too big... </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-css lang-css prettyprint-override"><code>.menu {
   width:10%;
   border: 1px solid red;
  }
  
  .main {
    max-width:100%; 
    width: 90%;
    display: inline-block;
    float: right;
    border: 1px solid red;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main&gt; 
   &lt;div class="main"&gt;
  &lt;div class="slideshow-container"&gt;
  
  &lt;!-- Full-width images with number and caption text --&gt;
    &lt;div class="mySlides fade"&gt;
      &lt;div class="numbertext"&gt;1 / 3&lt;/div&gt;
      &lt;img src="3D/ogen.jpg" id="ogen"&gt;
    &lt;/div&gt;
  
   &lt;!-- The dots/circles --&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;span class="dot" onclick="currentSlide(3)"&gt;&lt;/span&gt; 
  &lt;/div&gt; 
    
    &lt;!-- Next and previous buttons --&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&gt; 
   
   &lt;/main&gt;
   </code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm just starting btw, sorry if this is a really easy question with an easy fix. I just can't figure it out. </p>