title: How can I turn my div content to responsive?
body: <p>In my project, I'm using the top nav menu(purple part) and the left menu(pink part) as a layout to my views which you can see in the image. But when ı delete some contents from view, the left pink menu stay still long through the bottom. So it makes many empty white spaces at the bottom of my page. I want to make it responsive. I want it to be as long as the content. I'm not good with frontend so Idk is this about HTML or CSS. I made search but ı can't find the right keywords about my problem. I hope ı explained the problem clear :/</p>
  <p>My view; <a href="https://i.stack.imgur.com/4Vv6A.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Vv6A.jpg" alt="enter image description here" /></a></p>
  <p><strong>My problem part;</strong></p>
  <p><a href="https://i.stack.imgur.com/SYJi5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SYJi5.png" alt="enter image description here" /></a></p>
  <p><strong>and HTML code of that pink part;</strong></p>
  <pre><code>        &lt;div class=&quot;col-md-3 top-nav&quot;&gt;
              &lt;div class=&quot;logo&quot;&gt;
                  &lt;a href=&quot;index.html&quot;&gt;&lt;h1&gt;Alperen Öz&lt;/h1&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;top-menu&quot;&gt;
                  &lt;span class=&quot;menu&quot;&gt; &lt;/span&gt;
  
                  &lt;ul class=&quot;cl-effect-16&quot;&gt;
                      &lt;li&gt;&lt;a class=&quot;active&quot; href=&quot;&quot;~/Homepage/home&quot; data-hover=&quot;Anasayfa&quot;&gt;Anasayfa&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot; data-hover=&quot;Fotoğraf Galerisi&quot;&gt;Fotoğraf Galerisi&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot; data-hover=&quot;Hakkımda&quot;&gt;Hakkımda&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;!-- script-for-nav --&gt;
                  &lt;!-- script-for-nav --&gt;
                  &lt;ul class=&quot;side-icons&quot;&gt;
                      &lt;li&gt;&lt;a class=&quot;fb&quot; href=&quot;#&quot;&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class=&quot;twitt&quot; href=&quot;#&quot;&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class=&quot;goog&quot; href=&quot;#&quot;&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class=&quot;drib&quot; href=&quot;#&quot;&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          @RenderBody()
          &lt;div class=&quot;clearfix&quot;&gt; &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>thx in advance :)</p>