title: How can i make a div after my navbar take full screen in css?
body: <p>Here is the HTML code
  I have used bootstrap as well.</p>
  <pre><code>&lt;nav class=&quot;navbar navbar-expand-lg navbar-dark bg-dark&quot;&gt;
      // The code of navbar comes here
  &lt;/nav&gt;
  
  &lt;div class=&quot;main&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-lg-3 sidebar&quot;&gt;
                &lt;div class=&quot;sidebar-elements&quot;&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;New Record &lt;i class=&quot;fas fa-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Update &lt;i class=&quot;fas fa-pencil&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Delete &lt;i class=&quot;fas fa-trash-alt&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/i&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;a href=&quot;#&quot;&gt; Contact US &lt;/a&gt;
                &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/6yvjy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6yvjy.png" alt="See this picture" /></a></p>
  <p>As in the picture there is a black navbar
  The violet one is the main class
  The one with the background cyan is the sidebar class
  I want to make the sidebar and main go full screen.</p>
  <p>I added a 100% t html and body. Now if i add height 100% to main class or side bar class then it goes beyond the screen (i guess the height going beyond the screen is equal to the height of the navbar) and adds a scroll bar which i dont want.</p>
  <p>Can someone help?</p>
  <p>The CSS code is as follows</p>
  <pre><code>html,body{
      height: 100%;
  }
  .row{
      width: 100vw;
  }
  .main{
      background-color: blueviolet;
  }
  .sidebar{
      background-color: cyan;
  }
  </code></pre>