CSS – 백분율 높이가 왜 작동하지 않습니까? [복제]
이 질문에는 이미 답변이 있습니다.
- 백분율 높이 HTML 5 / CSS 6 답변
퍼센트 값은 height작동하지 않지만 퍼센트 값 width은 어떻게 작동합니까?
예를 들면 다음과 같습니다.
<div id="working"></div>
<div id="not-working"></div>
#working{
width:80%;
height:140px;
background:orange;
}
#not-working{
width:80%;
height:30%;
background:green;
}
#working끝 의 너비는 뷰포트의 80 %이지만 #not-working끝 의 높이는 0입니다.
블록 요소의 높이는 기본적으로 블록 내용의 높이입니다. 따라서 다음과 같이 주어집니다.
<div id="outer">
<div id="inner">
<p>Where is pancakes house?</p>
</div>
</div>
#inner단락을 포함 할만큼 키가 커지고 포함하기에 충분히 #outer커질 것 #inner입니다.
높이 또는 너비를 백분율로 지정하면 요소의 부모에 대한 백분율입니다. 너비의 경우, 달리 명시되지 않는 한 모든 블록 요소는 부모 블록까지 넓게 확장됩니다 <html>. 따라서 블록 요소의 너비는 내용과 무관 width: 50%하며 잘 정의 된 수의 픽셀을 생성합니다.
그러나 특정 높이를 지정하지 않으면 블록 요소의 높이는 내용에 따라 다릅니다 . 따라서 부모와 자식 사이에 높이가 관련된 height: 50%피드백이 있으며 부모 요소에 특정 높이를 부여하여 피드백 루프를 끊지 않으면 말하는 것은 잘 정의 된 값을 산출하지 않습니다.
height속성 의 백분율 값 에는 약간의 복잡성이 있으며 width및 height속성은 실제로 서로 다르게 동작합니다. 사양을 둘러 보도록하겠습니다.
height 특성:
CSS Snapshot 2010 사양에 대한 내용을height 살펴 보겠습니다 .
백분율은 생성 된 상자를 포함하는 블록 의 높이와 관련하여 계산됩니다 . 포함하는 블록의 높이가 명시 적으로 지정되지 않은 경우 (즉, 내용 높이에 따라 다름)이 요소가 절대적으로 배치되지 않으면 값은 'auto'로 계산됩니다. 루트 요소의 백분율 높이는 초기 포함 블록을 기준으로합니다 . 참고 : 포함 블록이 블록 레벨 요소를 기반으로하는 절대 위치 요소의 경우 백분율은 해당 요소의 패딩 상자 높이를 기준으로 계산됩니다.
OK, 단계별로 나누어 봅시다.
백분율은 생성 된 상자를 포함하는 블록 의 높이와 관련하여 계산됩니다 .
포함 블록 은 무엇입니까 ? 약간 복잡하지만 기본 static위치 의 일반 요소 의 경우 다음과 같습니다.
가장 가까운 블록 컨테이너 조상 상자
또는 영어로 된 부모 상자. (이것이 무엇 fixed이고 absolute위치 가 무엇인지 아는 것이 가치가 있지만,이 답변을 짧게 유지하는 것을 무시하고 있습니다.)
따라서 다음 두 가지 예를 살펴보십시오.
<div id="a" style="width: 100px; height: 200px; background-color: orange">
<div id="aa" style="width: 100px; height: 50%; background-color: blue"></div>
</div><div id="b" style="width: 100px; background-color: orange">
<div id="bb" style="width: 100px; height: 50%; background-color: blue"></div>
</div>이 예에서의 함유 블록 #aa이다 #a등등에 대한, #b그리고 #bb. 여태까지는 그런대로 잘됐다.
스펙의 다음 문장은 height이 답변의 소개에서 언급 한 합병증입니다.
포함하는 블록의 높이가 명시 적으로 지정되지 않은 경우 (즉, 컨텐츠 높이에 따라 다름)이 요소가 절대적으로 배치되지 않으면 값은 'auto'로 계산됩니다 .
아하! 포함하는 블록의 높이가 명시 적으로 지정되었는지 여부는 중요합니다!
- 의 경우 50 %
height:200px는 100px입니다.#aa - 그러나 50 %
height:autoISauto의 경우 0 픽셀이며,#bb이후에 대한 내용이 없습니다auto로 확장하려면
사양에서 알 수 있듯이 포함 블록이 절대 위치에 있는지 여부도 중요하지만로 넘어 갑시다 width.
width 특성:
그래서 같은 방식으로 작동 width합니까? 사양을 살펴 보자 .
백분율은 생성 된 상자의 포함 블록의 너비를 기준으로 계산됩니다.
변화하기 이전부터 불통이 친숙한 예를 살펴 보자 width대신 height:
<div id="c" style="width: 200px; height: 100px; background-color: orange">
<div id="cc" style="width: 50%; height: 100px; background-color: blue"></div>
</div><div id="d" style=" height: 100px; background-color: orange">
<div id="dd" style="width: 50%; height: 100px; background-color: blue"></div>
</div>- 의 경우 50 %
width:200px는 100px입니다.#cc - 50 %의
width:auto50 %width:auto는 결국height이 사례를 다르게 취급하는 특별한 규칙이 없습니다.
자, 여기 까다로운 비트가 있습니다 : auto부분적으로 지정되었는지 width또는 height! 에 따라 부분적으로 다른 것을 의미합니다 . 를 들어 height, 그냥 내용 *에 맞게 필요한 높이를 의미하지만, 위해 width, auto실제로는 더 복잡하다. 이 경우 코드 스 니펫에서 볼 수 있습니다.이 경우 뷰포트의 너비가됩니다.
너비의 자동 값에 대해 사양은 무엇입니까 ?
너비는 다른 속성의 값에 따라 다릅니다. 아래 섹션을 참조하십시오.
와이, 그건 도움이되지 않습니다. 문제를 해결하기 위해 유스 케이스의 "폭과 여백 계산"이라는 제목의 자막 "대체 흐름에서 대체되지 않은 블록 레벨 요소 "와 관련 섹션을 찾았습니다 .
다음 특성은 다른 특성의 사용 된 값 중에서 유지되어야합니다.
'여백-왼쪽'+ '테두리-왼쪽-폭'+ '패딩-왼쪽'+ '너비'+ '패딩-오른쪽'+ '테두리-오른쪽 너비'+ '여백-오른쪽'= 포함 블록의 너비
OK, 따라서 width관련 여백, 테두리 및 패딩 테두리는 모두 포함 블록의 너비에 합쳐야합니다 ( 작동 방식의 후손이 아님height ). 하나의 사양 문장 만 더 :
'width'가 'auto'로 설정되면 다른 'auto'값은 '0'이되고 'width'는 결과 동등성 뒤에옵니다.
아하! 따라서이 경우 width:auto50 %는 뷰포트의 50 %입니다. 바라건대 이제 모든 것이 마침내 의미가 있습니다!
각주
* 최소한이 경우에는 문제가되지 않습니다. spec 자 , 이제는 모든 종류의 것이 이제 의미가 있습니다.
컨테이너의 높이가 백분율로 정의되어 있어도 부모 컨테이너를 제공해야한다고 생각합니다. 이 솔기는 잘 작동합니다 : JSFiddle
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 50%;
}
높이가있는 컨테이너를 제공해야합니다. 너비는 뷰포트를 기본 너비로 사용합니다
다른 옵션은 div에 스타일을 추가하는 것입니다
<div style="position: absolute; height:somePercentage%; overflow:auto(or other overflow value)">
//to be scrolled
</div>
그리고 이것은 요소가 가장 가까운 위치의 조상에 대해 위치한다는 것을 의미합니다.
내용이 없으면 높이에는 백분율을 계산할 값이 없습니다. 그러나 부모를 지정하지 않으면 너비는 DOM에서 백분율을 가져옵니다. (예제 사용) 첫 번째 div 안에 두 번째 div를 배치하면 결과가 렌더링됩니다 ... 아래 예는 ...
<div id="working">
<div id="not-working"></div>
</div>
두 번째 div는 첫 번째 div 높이의 30 %입니다.
참고 URL : https://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work
'IT' 카테고리의 다른 글
| jQuery가 아닌 크로스 브라우저 JavaScript 맨 위로 스크롤 (0) | 2020.04.25 |
|---|---|
| dockerfile을 사용하여 개인 git repo 복제 (0) | 2020.04.25 |
| 디렉토리 트리에서 모든 심볼릭 링크를 찾으려면 어떻게합니까? (0) | 2020.04.25 |
| Bash에서 굵은 텍스트를 어떻게 출력합니까? (0) | 2020.04.25 |
| iOS 7.0 및 시스템 성능 저하에서 유효하지 않은 컨텍스트 0x0 (0) | 2020.04.25 |