2014-09-06 1 views
1

왜 비율을 사용하면 화면에 표시되지 않지만 픽셀을 사용할 때 이해가 안되나요? 내가 일부 콘텐츠 내 사업부를 차지하는 경우는 내가 원하는 영향이 없습니다요소가 채워져 있지 않으면 너비와 높이 비율에 영향을주지 않습니다.

<body> 
    <div class="container-content"></div> 
</body> 

body{ 
    width: 100%; 
    height: 100%; 
} 

.container-content{ 
    width: 50%; 
    height: 50%; 
    margin: 0 auto 0 auto; 
    background-color: green; 
} 

:

내 코드입니다. 위치를 절대 또는 고정으로 변경하면 원하는 영향을 줄 수 있습니다 (상자 만 사용). 픽셀 대신 백분율을 변경하는 경우에도 원하는 효과를 얻을 수 있습니다 (상자 만).

나는 무엇이 잘못 되었습니까?

감사

답변

4
이와 같은 경우

, 모두 html/body 요소 100%의 높이가 필요합니다. 그렇게하면 효과가 있습니다. html 요소가 0의 초기 높이를했기 때문에

Example Here

html, body { 
    height: 100%; 
} 

는 작동하지 않는 이유였다. 모든 어린이 요소가 백분율 기반 값을 사용했기 때문에 100%0 인 경우 0이기 때문에 아무 것도 나타나지 않습니다.

+0

네가 맞아. 하지만 어떤 경우에는 body에만 적용되지만 html에는 적용되지 않습니다. –

+0

@ C-linkNepal 왜냐하면 다른 자식 요소가 없기 때문에이 경우 html 요소의 높이가 '0'이기 때문입니다. 다른 경우에는'html' 요소의 높이를 확장하는 자식 요소가 있으므로 백분율 기반 높이 값이 작동합니다. –

+0

무엇을 의미합니까? html은 항상 하위 요소를 가지고 있습니다 ... –