CSS – 백분율 높이가 작동하지 않는 이유는 무엇입니까?
백분율 값을 사용하는 이유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 사양에 대한 설명을 살펴보겠습니다.
백분율은 생성된 상자에 들어 있는 블록의 높이를 기준으로 계산됩니다.포함하는 블록의 높이가 명시적으로 지정되지 않은 경우(즉, 내용 높이에 따라 다름), 이 요소가 절대적으로 배치되지 않은 경우 값은 '자동'으로 계산됩니다.루트 요소의 백분율 높이는 초기 포함 블럭을 기준으로 합니다.참고: 블록을 포함하는 블록이 블록 수준 요소를 기반으로 하는 절대 위치 요소의 경우 해당 요소의 패딩 상자 높이를 기준으로 백분율을 계산합니다.
좋아요, 그럼 단계별로 나누어 보겠습니다.
백분율은 생성된 상자에 들어 있는 블록의 높이를 기준으로 계산됩니다.
차단막이 뭐죠?좀 복잡하지만 기본값에 있는 일반적인 요소의 경우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제가 이 답변의 서론에서 언급한 합병증입니다.
포함하는 블록의 높이가 명시적으로 지정되지 않은 경우(즉, 내용 높이에 따라 다름), 이 요소가 절대적으로 배치되지 않은 경우 값은 '자동'으로 계산됩니다.
아하! 포함된 블록의 높이가 명시적으로 지정되었는지 여부!
- 의 %
height:200px의 경우 100 px입니다.#aa - 하지만 50%는
height:auto이다.auto, 의 경우 0 px입니다.#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>- 의 %
width:200px의 경우 100 px입니다.#cc - 의 %
width:auto모든 것의 50%입니다.width:auto결국은 그렇지 않습니다.height, 이 사건을 다르게 다루는 특별한 규칙은 없습니다.
자, 여기 까다로운 부분이 있습니다.auto다른 것들을 의미합니다, 부분적으로 그것이 특정되었는지 여부에 따라.width아니면height! 의 경우height, 그것은 단지 내용물에 맞는 데 필요한 높이를 의미했습니다*. 하지만,width,auto사실 더 복잡합니다 이알 수 있습니다.이 경우에 해당하는 코드 조각을 보면 뷰포트의 너비가 됨을 알 수 있습니다.
규격에는 너비에 대한 자동 값이 무엇이라고 나와 있습니까?
너비는 다른 특성의 값에 따라 달라집니다.아래 절을 참조하십시오.
야, 그건 도움이 안 돼요.수고를 덜기 위해 "폭과 여백 계산"이라는 제목의 사용 사례에 대한 관련 섹션을 찾아 보았습니다. "블록 수준, 교체되지 않은 요소 정상 흐름"이라는 부제는 다음과 같습니다.
다음 제약 조건은 다른 특성의 사용된 값 사이에 있어야 합니다.
'margin-왼쪽' + '경계-왼쪽' + 'padding-왼쪽' + '너비' + 'padding-오른쪽' + '경계-오른쪽' + 'margin-오른쪽' = 포함 블록의 너비
네, 그래서.width또한 관련 여백, 테두리 및 패딩 테두리는 모두 포함된 블록의 너비에 더해져야 합니다(아래로 내려가지 않음).height효과가 있습니다.스펙 문장 하나만 더 하면 됩니다.
'width'가 'auto'로 설정되면 다른 'auto' 값은 '0'이 되고 'width'는 결과적으로 같아집니다.
아하! 그럼 이 경우에는 50%가width:auto뷰포트의 50%입니다.이제 모든 것이 마침내 이해가 되기를 바랍니다!
각주
* 적어도 이 경우에는 중요합니다.스펙 이제 모든 게 말이 돼요
그냥 부모 용기를 주면 될 것 같아요그 컨테이너의 높이가 백분율로 정의되어 있다고 해도 말입니다.잘 작동하는 것 같습니다: 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 id="working">
<div id="not-working"></div>
</div>
두 번째 디브는 첫 번째 디브의 키의 30%입니다.
언급URL : https://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work
'programing' 카테고리의 다른 글
| where-clause - 성능에서 계산된 열 (0) | 2023.10.21 |
|---|---|
| PowerShell에 임시 디렉토리를 생성하시겠습니까? (0) | 2023.10.21 |
| C#에서 이름과 성의 첫 글자를 대문자로 쓰는 방법은 무엇입니까? (0) | 2023.10.16 |
| 워드프레스 웹사이트의 사이드바 아래에 '1'자리가 나타납니다. (0) | 2023.10.16 |
| 행이 없는 테이블에서 열의 최대값 선택 (0) | 2023.10.16 |