CSS HTML - Large white gap between body and footer

Question

My Webpage Pic

I don't have a lot of content on this index page, so there's a large white gap between my content and my footer. Pls look at the image.

How do I color this white space orange? Or extend my "white" page until it reaches the footer.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.page {
  background-color: #ffd000;
  position: relative;
}

.top-menu-container {
  color: #ffd000;
  background-color: #ff6500;
  padding: 20px 0;
  flex: 1 0 auto;
  justify-content: center;
}

.top-menu {
  border: 3px solid #ffd000;
  width: 900px;
  display: flex;
  justify-content: space-around;
}

.top-links {
  border: 2px solid #005aff;
  display: flex;
  justify-content: flex-end;
}

.top-links a {
  color: #ffd000;
}

.top-links a:hover {
  color: #005aff;
  font-style: underline;
}

.top-title p {
  color: red;
}

.login {
  margin-left: 20px;
}

.horizontal-grid-container {
  display: flex;
  justify-content: center;
}

.horizontal-box {
  width: 450px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
}

.horizontal-box-item {
  background-color: #005aff;
  border: 2px solid #fff;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Ariel;
  font-size: 18px;
  color: #ffa500;
}

.horizontal-box-item a {
  color: #ffd000;
}

.horizontal-box-item a:hover {
  color: #000;
  font-style: underline;
}

.first-item {
  order: 0;
}

.second-item {
  order: 1;
}

.page-container {
  display: flex;
  justify-content: center;
}

.page-box {
  width: 900px;
  border: 3px solid #ff6500;
  font-family: Ariel;
  font-size: 18px;
  color: #000;
  padding: 10px 0;
  background-color: #fff;
}

.page-text {
  text-align: center;
  color: #ffa500;
}

.page-text ul li {
  list-style: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.footer {
  background: #ffd000;
  flex-shrink: 0;
}

.footer p {
  text-align: center;
}

<div class='page'>
  <div class='top-menu-container'>
    <div class='top-menu'>
      <div class='top-title'>Action &amp; Improve</div>
      <div class='top-links'>
        .....
      </div>
    </div>
  </div>
  <div class='horizontal-grid-container'>
    <div class='horizontal-box'>
      ....
    </div>
  </div>
  <div class='page-container'>
    <div class='page-box'>
      <div class='page-text'>
        .....
      </div>
    </div>
  </div>
</div>
<div class="footer">
  <p>Copyright blah 2020</p>
</div>

I've tried playing about with Flexbox and just adding in Background-color: at various places but no luck.

I'm using Django and Python for the backend of this website so I've removed the python code from the webpage.

Thanks Everyone :)

Answer 1

Thanks for the help guys. I took the HTML and CSS code out of Django and ran it as a basic webpage and CSS file. Then the above answers did sort the issue out. The problem must be to do with Django, maybe it doesn't refresh the CSS code quickly enough or something...

Answer 2

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.page {
  background-color: #ffd000;
  position: relative;
  flex: 1; /* THIS NEW LINE */
}

.top-menu-container {
  color: #ffd000;
  background-color: #ff6500;
  padding: 20px 0;
  flex: 1 0 auto;
  justify-content: center;
}

.top-menu {
  border: 3px solid #ffd000;
  width: 900px;
  display: flex;
  justify-content: space-around;
}

.top-links {
  border: 2px solid #005aff;
  display: flex;
  justify-content: flex-end;
}

.top-links a {
  color: #ffd000;
}

.top-links a:hover {
  color: #005aff;
  font-style: underline;
}

.top-title p {
  color: red;
}

.login {
  margin-left: 20px;
}

.horizontal-grid-container {
  display: flex;
  justify-content: center;
}

.horizontal-box {
  width: 450px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
}

.horizontal-box-item {
  background-color: #005aff;
  border: 2px solid #fff;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Ariel;
  font-size: 18px;
  color: #ffa500;
}

.horizontal-box-item a {
  color: #ffd000;
}

.horizontal-box-item a:hover {
  color: #000;
  font-style: underline;
}

.first-item {
  order: 0;
}

.second-item {
  order: 1;
}

.page-container {
  display: flex;
  justify-content: center;
}

.page-box {
  width: 900px;
  border: 3px solid #ff6500;
  font-family: Ariel;
  font-size: 18px;
  color: #000;
  padding: 10px 0;
  background-color: #fff;
}

.page-text {
  text-align: center;
  color: #ffa500;
}

.page-text ul li {
  list-style: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.footer {
  background: #ffd000;
  flex-shrink: 0;
}

.footer p {
  text-align: center;
}

<div class='page'>
  <div class='top-menu-container'>
    <div class='top-menu'>
      <div class='top-title'>Action &amp; Improve</div>
      <div class='top-links'>
        .....
      </div>
    </div>
  </div>
  <div class='horizontal-grid-container'>
    <div class='horizontal-box'>
      ....
    </div>
  </div>
  <div class='page-container'>
    <div class='page-box'>
      <div class='page-text'>
        .....
      </div>
    </div>
  </div>
</div>
<div class="footer">
  <p>Copyright blah 2020</p>
</div>

Add flex: 1 to class .page

At this stackoverflow asnwer the explanation: What does flex: 1 mean?

Answer 3

Remove this Property flex: 1 0 auto; fot this class .top-menu-container

.top-menu-container {
    color: #ffd000;
    background-color: #ff6500;
    padding: 20px 0;
    /*flex: 1 0 auto;*/ /*Remove this*/
    justify-content: center;

}