How do I get my main div to stretch to the top of my footer

HTML-CSS
1

codepen

How do I get my main div to stretch to my footer.

if i set html, body{ height: 100% } it goes too far

2

By main div I assume you mean the main element with the .container class?

You can use a calc on the .container.

.container {
  /*height: 100%;*/
  width: 500px;
  margin: auto;
  height: calc(100vh - 260px);
}

If you change the top/bottom padding on the nav or footer, or if you add box-sizing: border-box; to everything at some point, you will have to change the px value in the calc function.

You have an overflow on the nav, try using box-sizing: border-box;

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.container {
  /*height: 100%;*/
  width: 500px;
  margin: auto;
  height: calc(100vh - 173px); /* 173px is now the height of the nav + footer, give or take */
}