해결책
중첩 된 플렉스 컨테이너를 사용하십시오.
백분율 높이를 제거하십시오. 테이블 속성을 제거하십시오. 를 제거하십시오 vertical-align. 절대 위치를 피하십시오. flexbox를 계속 사용하십시오.
display: flex플렉스 품목 ( .item)에 적용 하여 플렉스 용기로 만듭니다. 그러면 자동으로 설정 align-items: stretch되어 자식 ( .item-inner)에게 부모의 전체 높이를 확장하도록 지시합니다 .
중요 :이 방법이 작동하려면 플렉스 아이템에서 지정된 높이를 제거하십시오. 어린이의 키가 지정된 경우 (예 height: 100%:) align-items: stretch부모로부터 오는 것을 무시합니다 . 를 들어 stretch작업에 기본적으로 아이의 높이에 계산해야한다 auto (자세한 설명 ).
이것을 시도하십시오 (HTML을 변경하지 마십시오) :
.container {
display: flex;
flex-direction: column;
height: 20em;
border: 5px solid black
}
.item {
display: flex; /* new; nested flex container */
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
display: flex; /* new; nested flex container */
flex: 1; /* new */
/* height: 100%; <-- remove; unnecessary */
/* width: 100%; <-- remove; unnecessary */
/* display: table; <-- remove; unnecessary */
}
a {
display: flex; /* new; nested flex container */
flex: 1; /* new */
align-items: center; /* new; vertically center text */
background: orange;
/* display: table-cell; <-- remove; unnecessary */
/* vertical-align: middle; <-- remove; unnecessary */
}
<div class="container">
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
</div>
jsFiddle 데모
설명
내 문제는 .item-inner { height: 100% }웹킷 (Chrome)에서 작동하지 않는다는 것입니다.
전통적인 스펙 구현과 맞지 않는 방식으로 백분율 높이를 사용하고 있기 때문에 작동하지 않습니다.
10.5 내용 높이 : height속성
백분율
백분율 높이를 지정합니다. 백분율은 생성 된 상자를 포함하는 블록의 높이를 기준으로 계산됩니다. 포함하는 블록의 높이가 명시 적으로 지정되지 않고이 요소가 절대적으로 배치되지 않으면 값은로 계산됩니다 auto.
auto
높이는 다른 속성의 값에 따라 다릅니다.
다시 말해, 유입 아이에 대한 백분율 높이가 작동하려면 부모의 높이가 설정되어 있어야합니다 .
코드에서 최상위 컨테이너의 높이는 다음과 같습니다. .container { height: 20em; }
세 번째 레벨 컨테이너의 높이는 다음과 같습니다. .item-inner { height: 100%; }
그러나 그들 사이에, 두 번째 수준의 컨테이너 - .item- 하지 않는 정의 된 높이를 가지고있다. 웹킷은 링크가 누락 된 것으로 간주합니다.
.item-inner크롬을 말하고있다 : 줘height: 100% . Chrome은 참조를 위해 부모 ( .item)를 찾아 응답합니다. 무엇의 100 %? 나는flex: 1 거기에 있는 규칙을 무시하고 아무것도 보이지 않습니다 . 결과적으로 height: auto사양에 따라 (컨텐츠 높이)가 적용됩니다 .
반면에 Firefox는 이제 자녀의 백분율 높이에 대한 참조로 부모의 플렉스 높이를 허용합니다. IE11과 Edge는 플렉스 높이도 수용합니다.
또한 Chrome은 ( 을 포함하여 모든 숫자 값이 작동하거나 작동 하지 않음) 과 함께 사용되는 경우flex-grow 적절한 부모 참조로 허용 됩니다 . 그러나이 글을 쓰는 시점에서이 솔루션은 Safari에서 실패합니다.flex-basisautoflex-basis: 0
#outer {
display: flex;
flex-direction: column;
height: 300px;
background-color: white;
border: 1px solid red;
}
#middle {
flex-grow: 1;
flex-basis: 1px;
background-color: yellow;
}
#inner {
height: 100%;
background-color: lightgreen;
}
<div id="outer">
<div id="middle">
<div id="inner">
INNER
</div>
</div>
</div>
네 가지 솔루션
1. 모든 부모 요소의 높이를 지정하십시오
신뢰할 수있는 브라우저 간 솔루션은 모든 부모 요소의 높이를 지정하는 것입니다. 이는 웹킷 기반 브라우저가 스펙 위반을 고려하는 누락 된 링크를 방지합니다.
그 참고 min-height하고 max-height허용되지 않습니다. height속성 이어야합니다 .
자세한 내용은 여기 : CSS height속성 및 백분율 값 작업
2. CSS 상대 및 절대 위치
position: relative부모와 position: absolute자녀에게 적용하십시오 .
크기와 어린이 height: 100%및 width: 100%, 또는 사용 오프셋 특성 : top: 0, right: 0, bottom: 0, left: 0.
절대 위치 지정을 사용하면 백분율 높이는 부모에서 지정된 높이없이 작동합니다.
3. 불필요한 HTML 컨테이너를 제거합니다 (권장).
주위에 두 개의 컨테이너가 필요 button합니까? 왜 제거하지 .item거나 .item-inner, 또는 둘 다? button요소는 때때로 플렉스 컨테이너로 실패 하지만 플렉스 항목 일 수 있습니다. 또는 button의 자녀를 만들고 무료 마크 업을 제거 하는 것을 고려하십시오 ..container.item
예를 들면 다음과 같습니다.
.container {
height: 20em;
display: flex;
flex-direction: column;
border: 5px solid black
}
a {
flex: 1;
background: orange;
border-bottom: 1px solid white;
display: flex; /* nested flex container (for aligning text) */
align-items: center; /* center text vertically */
justify-content: center; /* center text horizontally */
}
<div class="container">
<a>Button</a>
<a>Button</a>
<a>Button</a>
</div>
4. 중첩 된 Flex 컨테이너 (권장)
백분율 높이를 제거하십시오. 테이블 속성을 제거하십시오. 를 제거하십시오 vertical-align. 절대 위치를 피하십시오. flexbox를 계속 사용하십시오.
display: flex플렉스 품목 ( .item)에 적용 하여 플렉스 용기로 만듭니다. 그러면 자동으로 설정 align-items: stretch되어 자식 ( .item-inner)에게 부모의 전체 높이를 확장하도록 지시합니다 .
중요 :이 방법이 작동하려면 플렉스 아이템에서 지정된 높이를 제거하십시오. 어린이의 키가 지정된 경우 (예 height: 100%:) align-items: stretch부모로부터 오는 것을 무시합니다 . 를 들어 stretch작업에 기본적으로 아이의 높이에 계산해야한다 auto (자세한 설명 ).
이것을 시도하십시오 (HTML을 변경하지 마십시오) :
.container {
display: flex;
flex-direction: column;
height: 20em;
border: 5px solid black
}
.item {
display: flex; /* new; nested flex container */
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
display: flex; /* new; nested flex container */
flex: 1; /* new */
/* height: 100%; <-- remove; unnecessary */
/* width: 100%; <-- remove; unnecessary */
/* display: table; <-- remove; unnecessary */
}
a {
display: flex; /* new; nested flex container */
flex: 1; /* new */
align-items: center; /* new; vertically center text */
background: orange;
/* display: table-cell; <-- remove; unnecessary */
/* vertical-align: middle; <-- remove; unnecessary */
}
<div class="container">
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
</div>