Div with height automatico dropdown menu

Question

Hello, my question is this. Let’s assume this code

<div>
<a>teste</a>
<a>teste</a>
<a>teste</a>
<a>teste</a>
</div>

This div is displayed when passing the mouse on a button, so far so good, but I checked on a site a similar case but it happened the following...the div had many options, when clicking on the dropdown menu, the div extends to the end of the screen, if the space is not enough to display all the content it generates a scroll, regardless of the position of the dropdown menu, the div only extends to the end of the screen, like: if the user rolled the page and the dropdown menu button was there at the bottom of the screen, by clicking on the menu...it makes the div go to that end of the screen.. showing few options and generating a scroll in the div, I’m trying to do the same, but if I put to div have height auto, when I click on the menu...it already shows all the content and extending the div out of the screen and does not generate scroll even with overflow:auto, because the div com height auto fits to the content and not the screen, I do not know if I could understand but summarizing, I want a div that extends only to the end of the screen, that it fits the screen and never display content that exceeds the visible part of the screen, then she has to create a scroll. I know you can do a schematic with javascript, but I want to know if there is a simpler alternative that use maybe only css.

Answer 1

Well I mounted a test drop here that I think does what you wanted, I in case I put a height max-height fixed, but you can control your elements and your hierarchy to leave it 100% and it gets exactly the screen size as you mentioned, or do this by javascript. But I just wanted to show you the functionality of max-height together with overflow:auto, the overflow makes appear the scrollbar, while selecting auto, it will check if there is content out of its limits and add the scrollbar. And if you don’t have content out of bounds, it won’t add this bar.

Only HTML and CSS (with multiple elements to get bigger q the screen)

* {padding:0; margin:0;}
html, body {width:100%; height:100%;}
ul, li {list-style:none;}
a {cursor:pointer;}
nav {float:left; width:100%; background:#e0e0e0;}
nav > ul > li {display:inline-block; padding:5px;}
nav > ul > li > ul {position:absolute; top:0; background:#666; width:200px; display:none; max-height:100%; overflow-y:auto;}
nav > ul > li:hover > ul {display:block;}
nav > ul > li:hover > ul li a {display:block; width:100%; padding:5px 0;}

<nav>
  <ul>
    <li>
      <a>MenuDropDown</a>
      <ul>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
      </ul>
    </li>
  </ul>
</nav>

Only HTML and CSS (with few elements to make it smaller than the screen)

* {padding:0; margin:0;}
html, body {width:100%; height:100%;}
ul, li {list-style:none;}
a {cursor:pointer;}
nav {float:left; width:100%; background:#e0e0e0;}
nav > ul > li {display:inline-block; padding:5px;}
nav > ul > li > ul {position:absolute; top:0; background:#666; width:200px; display:none; max-height:100%; overflow-y:auto;}
nav > ul > li:hover > ul {display:block;}
nav > ul > li:hover > ul li a {display:block; width:100%; padding:5px 0;}

<nav>
  <ul>
    <li>
      <a>MenuDropDown</a>
      <ul>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
      </ul>
    </li>
  </ul>
</nav>

Using Javascript (jQuery)

$(document).ready(changeMaxHeight);
$(window).resize(changeMaxHeight);
function changeMaxHeight(){
  var $dropdown = $('.dropdown');
  var $maxHeight = $(document).height();
  
  // $dropdown.css('max-height', $maxHeight+'px');
  $dropdown.css('max-height', ($maxHeight - 28) +'px'); // Caso queira retirar a altura do elemento "nav" é só subtrair a altura dele. Caso não queira só descomentar a linha acima e remover esta.
}

* {padding:0; margin:0;}
ul, li {list-style:none;}
a {cursor:pointer;}
nav {float:left; width:100%; background:#e0e0e0;}
nav > ul > li {display:inline-block; padding:5px; position:relative;}
nav > ul > li > ul {position:absolute; top:100%; background:#666; width:200px; display:none; overflow-y:auto;}
nav > ul > li:hover > ul {display:block;}
nav > ul > li:hover > ul li a {display:block; width:100%; padding:5px 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li>
      <a>MenuDropDown</a>
      <ul class="dropdown">
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
      </ul>
    </li>
  </ul>
</nav>

I hope I’ve helped.