Limit elements when arriving in a div

Question

Hello, I have a table of inputs (can be added more with a button) and I wanted that when I arrived at the footer, the inputs were not overlaid. I’m trying to get the top and the footer fixed on the scroll, but when I input a lot of inputs and stuff, they go under the footer.I have a div in the footer, is there any way to limit the elements when they got to it or close to it? Vlw to any help.

Answer 1

I made a version of how it would work, in a very simple way (put in whole page):

var DH = $(document).height();
$(window).on('resize', function() {
  DH = $(document).height();
})
$('.add').click(function() {
  var topbarH = $('.topBar').height();
  var footerH = $('.footer').height();
  var exemploH = 0;
  $('.exemplo').each(function(i) {
    exemploH += +$(this).innerHeight() + parseFloat($(this).css('margin'));
  })
  if (exemploH <= DH - topbarH - footerH - 40) {
    $('.container').append('<div class="exemplo">Aqui tem uma div</div>')
  }
})

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
.container {
  position: relative;
  width: 100%;
  height: calc(100vh - 120px);
  top: 60px;
}
.exemplo {
  width: 100%;
  height: 20px;
  margin: 10px 0;
  background: #333;
  color: #fff;
}
.topBar {
  width: 100%;
  height: 60px;
  background: #ccc;
  position: fixed;
  top: 0;
}
.footer {
  width: 100%;
  height: 60px;
  background: #ccc;
  position: fixed;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topBar">
  <button class="add" style="padding: 10px">Adicionar</button>
</div>
<div class="container"></div>
<div class="footer"></div>

Only there is no element deletion when the page is resized.

If you do not want to block the creation can create the scroll bar, with overflow-y: auto in the div.container:

$('.add').click(function() {
    $('.container').append('<div class="exemplo">Aqui tem uma div</div>')
})

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
.container {
  position: relative;
  width: 100%;
  height: calc(100vh - 120px);
  top: 60px;
  overflow-y: auto;
}
.exemplo {
  width: 100%;
  height: 20px;
  margin: 10px 0;
  background: #333;
  color: #fff;
}
.topBar {
  width: 100%;
  height: 60px;
  background: #ccc;
  position: fixed;
  top: 0;
}
.footer {
  width: 100%;
  height: 60px;
  background: #ccc;
  position: fixed;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topBar">
  <button class="add" style="padding: 10px">Adicionar</button>
</div>
<div class="container"></div>
<div class="footer"></div>