CSS HTML-正文和页脚之间的大空白

Question

My Webpage Pic

我在此索引页面上没有很多内容，因此我的内容和页脚之间有很大的空白。请看一下图像。

如何为这个空白区域涂上橙色？或扩展我的“白色”页面，直到到达页脚。

* {
  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>

我尝试过使用Flexbox，只是在不同的地方添加Background-color：但没有运气。

我在本网站的后端使用Django和Python，因此已从网页上删除了python代码。

感谢大家：）

Answer 1

* {
  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>

将flex: 1添加到.page类中>

在此stackoverflow下，进行解释：What does flex: 1 mean?

Answer 2

从此类flex: 1 0 auto;删除此属性.top-menu-container

Answer 3

感谢您的帮助。我从Django中提取了HTML和CSS代码，并将其作为基本的网页和CSS文件运行。然后以上答案确实解决了这个问题。问题一定是与Django有关，也许它没有足够快地刷新CSS代码或其他原因...