CSS : 부모보다 더 하위 항목은

Question

내가 부모에

height: 100% 

을 사용하고있는이 상황이 (100 %는 예상대로 작동하지 않음), 부모에 나는 34px 인이 헤더가 그리고 다시 100 % 인 컨테이너. 어떤 이유로 컨테이너 (정렬 된 목록)에 대한 부모

Here is a jsfiddle

보다 큰 그리고 여기에 정렬 된 목록은 부모 section 요소 외부에 왜 CSS는

* { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    box-sizing: border-box; 
} 
section { 
    padding: 10px 20px 20px 10px; 
    border: 2px solid black; 
} 

header { 
    height: 30px; 
    background-color: blue; 
} 

ol { 
    list-style-type: none; 
    border: 1px dashed #d2d4d8; 
    box-sizing: border-box; 
    background-color: yellow; 
    padding: 0; 
} 

li { 
    display: inline-block; 
    box-sizing: border-box; 
    background-color: green; 
    width: 30%; 
    border: 1px solid blue; 
    font-size: 0; 
} 

어떤 제안입니까?

Answer 1

ol의 높이를 상위 높이의 100 %로 설정합니다. 상위의 100 %에서 헤더의 30px를 뺀 값이 아닙니다. 내 머리 속에서 100 %가 "부모에게 채우기"를 의미하기를 원하지만 문자 그대로 100 %를 의미하기 때문에 이전에 좌절감을 느꼈습니다. 또한 일부 위치 물건을 할 수

ol { height: calc(100% - 30px); } 

하지만 항상 총 가져옵니다 당신은 CSS3 물건을 할 수 있다면, 당신은이에 CSS를 변경할 수 있습니다. 테스트되지 않은 아이디어는 다음과 같습니다.

section { position: relative; } 
ol { position: absolute; top: 30px; bottom: 0; } 

Answer 2

혼합 비율 및 고정 크기가 패딩에 도움이되지 않습니다. 그렇게하면 box-sizing:border-box;을 사용하여 너비와 높이의 백분율을 기준으로 패딩과 여백을 고려하여 끝 부분에 추가하지 않습니다.