HTML에서 여분의 높이 제거하기

SO와 비슷한 질문이 있지만 정확하지는 않으며 그 중 누구도 내 문제를 해결할 수 없습니다.HTML에서 여분의 높이 제거하기

내가 HTML 페이지 기본적

<html><body> 
    <div class="container" style="height:auto;"> 
     <div class="header" style="height:120px;">...</div> 
     <div class="context" style="height:360px;"> 
     <div id="area1" style="height:440px; position:relative; top:-20px;"></div> 
     <div id="area2" style="height:120px; position:relative; top:-140px;"></div> 
     </div> 
     <div class="footer" style="height:120px;">...</div> 
    </div> 
</body></html>

다음의 구조를 갖는, 높이 360 픽셀이다 context 높이 440px와 DIV있다. 따라서 div는및 footer과 20px 및 60px 각각 겹칠 것입니다.

container의 높이가 자동으로 설정되고 "inspect element"를 사용하여 "600px"로 표시되므로 body입니다. 그러나 html의 높이는 680px입니다.

나는 여분의 80px가 어디에서 유래하는지 알지만 어떻게 제거합니까?

다른 질문이 있지만 추가 질문을 업데이트 한 후에 아무도 대답하지 않는 것 같습니다. How to design a gradient background of a page with unfixed height. 그 문제가 해결 될 수 있다면 아마도이 문제를 피할 수 있습니다.

* 그것은 context, area1 및 area2 실제로 두 div가 너무 많이 나는 단순히 코드를 보인다 *

업데이트합니다. 높이 120px의 area2은 area1과 완전히 겹칩니다.

출처

2011-11-23 DrXCheng

은 HTML 높이가 아닙니다 == 브라우저 창 높이? –

코드를 사용하면 내 HTML의 높이가 616 픽셀입니다. 그 여분의 픽셀이 어디에서 왔는지는 확실하지 않지만, 어떤 종류의 렌더링되지 않은 배수구가있을 수 있습니다. – worc

@AlessandroPezzato 왜 html 높이가 컨테이너 높이와 같지 않습니까? – DrXCheng

는 이러한 속성 사이에 세미콜론이 필요합니다. 나는 position:relative; top:-20px;을 margin-top:-20px으로 바꿉니다. 그리고 다른 하나와 비슷합니다.

출처

2011-11-24 06:34:44 DrXCheng

CSS가 잘못되었다는 것을 알고 있습니까? 이처럼

style="height:440px position:relative top:-20px"

: 내가 알아 낸

style="height:440px; position:relative; top:-20px"

출처

2011-11-23 02:57:59

나는 이와 같은 인라인을 쓰지 않았다. CSS가 정확합니다. – DrXCheng

이제 편집 된 것이 정확합니다. –

HTML에서 여분의 높이 제거하기

답변

관련 문제