文章/答案/技术大牛

发布

社区首页 >问答首页 >容器的高度并不占据整个网页

问容器的高度并不占据整个网页
EN

Stack Overflow用户

提问于 2017-10-06 08:56:32

回答 1查看 55关注 0票数 1

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

我分叉了我的网页，试图复制这个bug，方法是逐个对代码进行注释和测试。我相当肯定，当我使用dl标签时，它有点破坏了网站。然而，有时这些标签破坏了设计，有时却没有。谁能看看代码，并向我解释发生了什么事，以及如何解决它？谢谢。

  <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/

编辑：

问题解决了。我将页脚的页边距从默认的16 0px更改为0 0px，并将其工作。我想这个网站的最后一个元素(不管是页脚还是其他什么)的边际会影响到它，所以我必须注意。

twitter-bootstrap

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-10-06 09:01:34

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

这是需要更改以下内容的元素：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46602006

复制

相似问题

问容器的高度并不占据整个网页
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问容器的高度并不占据整个网页EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问容器的高度并不占据整个网页
EN