Auto height div with overflow and scroll when needed

Question

I\'m trying to make a website with no vertical scrolling for a page, but i need that one of the DIVs i have to expand vertically to the bottom of the page (at most), and tha

Answer 1

You can do this assignment easily by using jquery. In this way, you can define number of row limitation. Furthermore, you can regular breakpoints height that want adding vertical scrolling. I must say that more than 3 rows get modify class and also height is 76px.

$(document).ready(function() {
  var length = $(this).find('li').length;
  if (length > 3) {
    $(".parent").addClass('modify');
  }
})

/*for beauty*/

ul {
  margin: 0 auto;
  width: 50%;
  border: 1px solid #ccc;
  padding: 3px;
}

ul li {
  padding: 3px;
  background: #ccc;
  margin: 2px 0;
  list-style: none;
}

/*main class*/

.modify {
  overflow-y: scroll;
  height: 76px;
}

  
item 1
  
item 2
  
item 3
  
item 4