2014-07-21 1 views
0

내 코드입니다 : 높이와 폭이 95 %, 폭 작동으로 지정되어 있지만왜 몸 높이가 0으로 렌더링 않는 비 - 제로 여기

... 
<STYLE> 
body{ 
    position: static; 
    height: 95%; 
    width: 95%; 
    border: 2px; 
    border-style: solid; 
    border-radius: 5px; 
    border-color: black; 
    background-color: pink; 
    } 
<STYLE> 
... 
<body> 
<DIV id="div_1" > 
    <DIV id="div_2a" > 
     </DIV> 
    <DIV id="div_2b" > 
     </DIV> 
</DIV> 
</BODY> 
... 

하지만 높이가 분명히 붕괴 div에 콘텐츠가 없기 때문입니다. 이것은 반 직관적입니다. 상황에 모욕을 추가하려면 배경색이 테두리 외부로 확장되어 보이는 페이지 영역을 채 웁니다. 이것은 일종의 기본 body css 선언의 함수입니까? 그렇다면 무엇입니까? 그리고 어떻게이 행동을 멈출 수 있습니까? CSS를 참조 HTML로 변경하면 테두리가 축소되지 않고 배경색이 테두리 밖으로 확장된다는 점에서 직관적 인 동작은 입니다. 이 지점에서 버그처럼 보입니다.

답변

0

body의 높이를 95 %로 지정합니다. 즉, 부모 높이의 95 %를 차지합니다. 따라서 부모에게 html 태그 높이를 부여하면 body 키가됩니다.

html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
body{ 
    height: 95%; 
    width: 95%; 
    border: 2px; 
    border-style: solid; 
    border-radius: 5px; 
    border-color: black; 
    background-color: pink; 
} 
+0

내가 HTML 선언을 추가 한 후 예상 한 결과가 나타납니다. html의 배경이 테두리를 넘어서서 몸의 배경색이 왜 변하지 않는지에 대한 질문은 여전히 ​​있습니다. – user3861859

+0

@ user3861859 빠른 테스트는 [체액의 색이 참으로] (http://jsfiddle.net/A4GXm/)이라고 배웠습니다. 그러나 [html 태그에 흰색 배경] (http://jsfiddle.net/A4GXm/1/)을 추가하면 문제가 해결됩니다. – LinkinTED

+0

또한 본문 css도 테두리 주위에 여백을 포함하는 것으로 보입니다. body 태그의 기본 CSS는 무엇입니까? – user3861859