Div with automatic height dropdown menu

Navigation
2

Hello, my question is this. let's suppose this code 

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

This div is displayed when hovering a mouse, so here it is ok, but I checked on a site a similar case, but 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 where the dropdown menu is located, the div extends to the end of the screen, type: if the user rolled the page and the button of the dropdown menu was left on the screen, clicking on the menu ... it makes the div go to this end of the screen .. showing few options and generating a scroll in the div, I am trying to make one equal , but if I put it to div have height auto, when I click on the menu ... it already shows all the content and extends the div off the screen and does not generate the scroll even with the overflow: auto, because the div with height auto is adjusted to the content and not the screen, I do not know if you could understand but in short, I want a div that extends only to the end of the screen, it fits the screen and never displays content that exceeds the visible part of the screen, in which case it has to create a scroll. I know that you can do a schematic with javascript, but I want to know if you have a simpler alternative that uses maybe just css.

    
asked by anonymous 15.09.2016 / 15:35

1 answer

3

Well, I've put a test drop here that I think does what you wanted, in this case I put a fixed height max-height , but you can control its elements and its hierarchy to leave it 100% size of the screen as you quoted, or do this by javascript. But I just wanted to show you the max-height functionality along with the overflow:auto , the overflow makes the scroll bar appear, when selecting auto, it will check if there is content out of its limits and add the scroll bar. And if you do not have content out of your limits, it will not 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 stay 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><ulclass="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 have helped.

    
15.09.2016 / 16:14
Using JSON in JQuery library LinearLayout About Other LinearLayout