높이에 백분율을 사용할 때 이러한 추가 픽셀은 어디에서 오는가?

나는 현재 내가 만든 여러 웹 사이트에서 여러 번 성공적으로 사용한 끈적한 바닥 글을 사용하려고합니다. 여기에 링크가 있습니다 : http://ryanfait.com/sticky-footer/높이에 백분율을 사용할 때 이러한 추가 픽셀은 어디에서 오는가?

이번에는 더 문제를 일으키려고합니다. 따라서 특정 픽셀을 높이로 사용하고 싶지 않으므로 백분율로 전환 해 보았습니다. : 내가 전에 말했듯이 나는 높이 200 픽셀과 같은 특정 픽셀의 양을 사용 (그리고 래퍼 마진 - 하단을 변경할 때

<!DOCTYPE html"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 

     <link href="https://localhost/wordpress/wp-content/themes/TesterTheme/style.css" rel="stylesheet" type="text/css" /> 

    </head> 

    <body> 
     <div id="wrapper"> 

Content goes here. 

</div><!-- End Wrapper --> 

<div id="spacer"></div> 

<div id="footer"> 
</div> 

</body> 
</html>

것은, -400px하기 :

html, body { 
    height: 100%; margin: 0px; padding: 0px; 
} 

#wrapper{ 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin-bottom: -25%; 
    background: lime 
} 

#spacer{ 
    background: blue; 
    height: 25%;    /* This should be exactly the same as #footer height. */ 
} 

#footer{ 
    background: magenta; 
    height: 25%; 
}

그리고 여기는 HTML입니다) 잘 작동합니다. 높이에 백분율을 사용하는 경우 상위 요소의 높이의 백분율을 사용하고 모든 상위 요소의 높이를 정의해야 함을 읽었습니다. 내 생각 엔 몸과 html이 바닥 글의 유일한 조상 이니까. 이것은 실제로 그것이하는 일입니다. 나는 픽셀 룰러로 그것을 측정했고 바닥 글과 스페이서는 내 뷰 포트의 25 %를 측정합니다. 그러나 하나님은 왜 스크롤 막대가 브라우저 옆에 나타납니다 (예 ... 전체 화면입니다). 마치 몸에 마술처럼 확장 된 여분의 50 픽셀 정도가있는 것처럼 보입니다. 제발 도와주세요. 저는 지금까지 9 시간을 보냈습니다. 모든 것을 조사하고 다양한 전술을 시도했지만, 저는 항상 같은 결과를 얻었습니다. 백분율이 원하는 결과를 얻지 못하는 이유는 무엇입니까?

출처

2013-04-09 Digital Brent

참고 : 저는 Chrome, FF, IE에서이 기능을 시도했으며 모두 동일한 결과를 제공합니다. –

바닥 글과 스페이서 사이의 높이 차이를 유발하는 'margin-bottom : -25 %;'입니다. 여백이있는 백분율을 항상 요소의 ** width **에 상대적으로 사용할 때도 마찬가지입니다. 맨 아래쪽 여백을 사용하여 – Adrift

그렇다면 어떻게 높이를 높이와 같습니까? 또한 차이점에 대한 귀하의 의미에 대해 확신 할 수 없습니다. 나는 아마 나의 설명에서 충분히 명확하지 않았다. 바닥 글과 스페이서의 높이는 204px입니다. 내 뷰포트는 814 픽셀입니다. 래퍼의 아래쪽 여백을 -50 %로 변경하더라도 본문과 HTML은 여전히 814로 나오지만 바닥 글은 본문이 끝나는 위치보다 바닥 픽셀이 약 50 픽셀 더 낮습니다. –

이 문제를 해결할 수있는 옵션이 많이 있습니다. 당신이하는 방식으로 백분율을 사용하는 것은 좋은 생각이 아닙니다. 그것은 this이 자바 스크립트에서 어떻게 바뀔 수 있는지와 비슷합니다.

개인적으로 개인적으로는이 경로를 사용하여 응답 할 수 있습니다.

<div class="wrap"> 
    <div class="stuff"></div> 
    <div class="stuff"></div> 
    <div class="stuff"></div> 
</div> 
<div id="footer"></div>

그런 식으로 바닥 글은 항상 나머지 콘텐츠 아래에 설정됩니다. 바닥 글 높이를 여러 위치에 지정할 필요가 없습니다. 이 설정으로 원하는대로 백분율을 사용하십시오.

100 % 만족하지 않으시려면 jQuery/javascript를 사용하여 내용을 늘리십시오. 또는 심지어 CSS 미디어 쿼리.

출처

2013-04-09 21:08:37

감사합니다. 처음 엔 당신이 무엇을 의미하는지 확신 할 수 없었습니다.하지만 결국 나는 콘텐츠의 최소 높이를 75 %로 지정하고 바닥 글에 25 %의 높이를 부여했습니다. 이것은 잘 작동하는 것 같습니다. 지금은 분명해 보인다. 나는 어리석은 일을하려고 할 때 너무 많은 시간을 낭비했다는 것을 믿을 수 없다. –

그것은 우리 중 최고입니다. 가장 중요한 것은 절대 필요한 것보다 더 많은 코드를 넣는 것이 아닙니다. 꼭대기에서 아래로 항상 캐스케이드하십시오. CSS는 너무 많은 일을합니다. 그러면 자바 스크립트를 살펴보고 올바르게 되돌려 놓아야합니다. 해피 코딩! –

높이에 백분율을 사용할 때 이러한 추가 픽셀은 어디에서 오는가?

답변

관련 문제