Blank space between main div and footer

Question

There's a space between main div and footer, and I can not understand where it come from and how can I adjust it, I want it to be a footer down page, out of the main div.

#main {
  border: solid;
  width: 100%;
  height: 2000px;
}

#container {
  min-height: 100%;
  position: relative;
  top: 190px;
}

body {
  padding: 10px;
  padding-bottom: 60px;
  /* Height of the footer */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  /* Height of the footer */
  text-align: center;
  vertical-align: middle;
  background-color: rgb(62, 45, 212);
  color: white;
}

<div id="main"></div>
<div id="container">
  <div id="footer">--------Footer--------</div>
</div>

Answer 1

The container doesn't need to be positioned while it's child is absolutely positioned. If you want to keep a little bit of space between main and the container you could include a margin on the container. That way, whenever main gains changes in height, the footer will always keep the same space.

#main {
  border: solid;
  width: 100%;
  height: 2000px;
}

#container {
  min-height: 100%;
  position: relative;
  margin-top: 50px;
  /* top: 190px; */
}

body {
  padding: 10px;
  padding-bottom: 60px;
  /* Height of the footer */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  /* Height of the footer */
  text-align: center;
  vertical-align: middle;
  background-color: rgb(62, 45, 212);
  color: white;
}

<div id="main"></div>
<div id="container">
  <div id="footer">--------Footer--------</div>
</div>