html - 容器的高度不占据整个网页

Question

我想让容器的高度(白色背景)占据整个网页，它就是这样做的。

我已经 fork 我的网页并尝试通过注释掉并逐部分测试代码来复制错误。我相当确定，当我使用 dl dd dt 标签时，它有点破坏了网站。但是，有时这些标签会破坏设计，有时却不会。任何人都可以看一下代码，并向我解释发生了什么以及如何解决它吗？谢谢。

HTML

  <div class="pad-left pad-top">
    <h2 class="title">Timeline</h2>
    <dl>
      <dt>June 28, 1971</dt>
      <dd>Elon Reeve Musk was born in Pretoria, Transvaal, South Africa, the son of Maye Musk and Errol Musk.</dd>
      .....
    </dl>

    <p class="text-center">To find out more about Elon Musk, visit <a href="https://blog.adioma.com/how-elon-musk-started-infographic/">How Elon Musk Started – Infographic</a></p>
  </div>

CSS

.pad-top { /* padding in header and on top of Timeline */
  padding-top: 60px;
}

.pad-left { 
  padding-left: 30px;
}

dl {
  width: 100%;
  overflow: hidden;
  padding-left: 55px;
}

dt {
  float: left;
  width: 15%;
  /* adjust the width; make sure the total of both is 100% */
}

dd {
  float: left;
  width: 85%;
  padding-right:15px;
  /* adjust the width; make sure the total of both is 100% */
}

https://codepen.io/jenlky/full/WZdQoB/

编辑:

问题解决了。我将页脚的边距从默认的 16px 更改为 0px，它成功了。我想网站最后一个元素(无论是页脚还是其他元素)的边距会影响它，所以我必须注意。

Answer 1

发生这种情况的原因是因为您在页脚 中的p 元素上有一个边距。将边距从 16 px 更改为 0，它会修复它。

这是您需要更改边距的元素:

 <p>This page has been authored and coded by Jenssen Lee.</p>