바닥 글이 과도 함

Question

내 바닥 글에 도움이 필요합니다. 수평을 과도하게 확장하고 폭을 100 %로 설정 했으므로 이론상 페이지 크기 여야합니다. 어떤 도움이라도 대단히 감사 할 것입니다.

증가 디폴트로 element 그것에 width하고 해당 요소의 height을 padding or border properties를 추가 할 때

footer{ 
padding: 20px; 
color: #ffffff; 
background-color: #333; 
text-align: center; 
width: 100%; 
position: absolute; 
left: 0; 
bottom: 0; 
overflow: hidden; 


} 

Answer 1

당신은 바닥 글 다음이 당신의 CSS를 변경 페이지의 맨 왼쪽/오른쪽에 도달하고 있지 않음을 의미하는 경우

이

footer { 
padding: 20px, 0px, 0px, 0px; //Top, right, bottom, left 
color: #ffffff; 
background-color: #333; 
text-align: center; 
width: 100%; 
position: absolute; 
left: 0; 
bottom: 0; 
overflow: hidden; 
} 

Answer 2

이 box-sizing:border-box; 추가 HTML

<footer> 
<p>Mandurah Jetty Maintenance | Copyright &copy 2017</p> 
</footer> 

CSS. 따라서 box-sizing:border-box을 추가하면 다음 div의 increment이 할당 된 채우기 및 경계의 상태를 계속 유지합니다.

상자 크기 조정 속성은 요소의 너비와 높이를 계산하는 데 사용되는 기본 CSS 상자 모델 을 변경하는 데 사용됩니다.

footer{ 
 
padding: 20px; 
 
color: #ffffff; 
 
background-color: #333; 
 
text-align: center; 
 
width: 100%; 
 
position: absolute; 
 
left: 0; 
 
bottom: 0; 
 
overflow: hidden; 
 
box-sizing:border-box; /*Add this*/ 
 
}

<footer> 
 
<p>Mandurah Jetty Maintenance | Copyright &copy 2017</p> 
 
</footer>