컨테이너 높이가 전체 웹 페이지를 차지하지 않습니다

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로 바꿨습니다. 웹 사이트의 마지막 요소 (바닥 글 또는 기타)의 여백이 영향을 미칠 것으로 생각하므로주의해야합니다. 당신이 바닥 글에 p 요소에 마진을 가지고 있기 때문에 이런 일이

Answer 1

이유입니다. 여백을 16 px에서 0으로 변경하면 문제가 해결됩니다.

이것은 당신의 여백 변경해야 할 요소입니다 :

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