Question

我希望容器的高度（带有白色背景）占据整个网页，它就是这样做的。

我已经分叉了我的网页并尝试通过注释并逐个部分地测试代码来复制错误。我很确定当我使用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，并且ta-da工作正常。我想网站的最后一个元素（无论是页脚还是任何页面）的边距都会影响它，所以我必须注意。

Answer 1

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

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

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

容器的高度不占用整个网页

1 个答案: