集装箱的高度不占据整个网页

我希望集装箱的高度（有白色背景）占据整个网页，它是这样做的。集装箱的高度不占据整个网页

我已经分叉我的网页，并尝试复制错误，通过注释和部分测试代码部分。我很确定，当我使用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有效。我想网站的最后一个元素（无论是脚注还是其他）都会影响它，所以我必须注意。

来源

2017-10-06 helplah

你说的是在白色容器底部的差距？ –

是的。我已经用ZombieChowder的评论解决了这个问题。我猜想网站的最后一个元素（无论是脚注还是其他）都会导致这种情况发生。 – helplah

干杯！因此，为了避免页脚文本触及窗口底部，可以添加如padding-bottom：10px;到页脚元素 –

出现这种情况的原因是因为你有一个保证金在页脚您p元素。将保证金从16 px更改为0，它将修复它。

这是需要改变的边缘元素：

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

来源

2017-10-06 09:01:34 ZombieChowder

谢谢你解决了这个问题。当我注释掉dl dt dd标签时问题仍然存在，我猜测网站最后一个元素（页脚或任何其他元素）的边距会影响它。 – helplah

@helplah很高兴我能帮上忙。 – ZombieChowder

集装箱的高度不占据整个网页

回答

相关问题