集装箱的高度不占据整个网页
我希望集装箱的高度(有白色背景)占据整个网页,它是这样做的。集装箱的高度不占据整个网页
我已经分叉我的网页,并尝试复制错误,通过注释和部分测试代码部分。我很确定,当我使用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有效。我想网站的最后一个元素(无论是脚注还是其他)都会影响它,所以我必须注意。
出现这种情况的原因是因为你有一个保证金在页脚您p
元素。将保证金从16 px
更改为0
,它将修复它。
这是需要改变的边缘元素:
<p>This page has been authored and coded by Jenssen Lee.</p>
谢谢你解决了这个问题。当我注释掉dl dt dd标签时问题仍然存在,我猜测网站最后一个元素(页脚或任何其他元素)的边距会影响它。 – helplah
@helplah很高兴我能帮上忙。 – ZombieChowder
你说的是在白色容器底部的差距? –
是的。我已经用ZombieChowder的评论解决了这个问题。我猜想网站的最后一个元素(无论是脚注还是其他)都会导致这种情况发生。 – helplah
干杯!因此,为了避免页脚文本触及窗口底部,可以添加如padding-bottom:10px;到页脚元素 –