크롬/사파리가 플렉시블 부모의 높이를 100% 채우지 않음

programing

크롬/사파리가 플렉시블 부모의 높이를 100% 채우지 않음

codeshow 2023. 8. 20. 12:55

크롬/사파리가 플렉시블 부모의 높이를 100% 채우지 않음

저는 특정 높이의 세로 메뉴를 원합니다.

각 하위 항목은 상위 항목의 높이를 채우고 가운데 정렬된 텍스트를 가져야 합니다.

아이들의 수는 무작위이기 때문에 저는 역동적인 가치관을 가지고 일해야 합니다.

브.container자식을 합니다..item 항상 부모의 키를 채워야 합니다.그러기 위해 플렉스박스를 사용했습니다.

를 만들기 는 사용중중간정렬텍스링로트크만데사다니용합드는를인된에▁with다▁for니▁using▁aligned사▁am합용▁links데▁making를 사용합니다.display: table-cell기술. 그러나 사용해야 .그러나 테이블 디스플레이를 사용하려면 높이를 100% 사용해야 합니다.

는 나의문는입니다..item-inner { height: 100% }웹킷(크롬)에서 작동하지 않습니다.

이 문제에 대한 해결책이 있습니까?
아니면 모든 것을 만드는 다른 기술이 있습니까?.item가운데에 수직으로 정렬된 텍스트로 부모의 높이를 채웁니까?

예를 들어, 여기서 jsFiddle은 Firefox 및 Chrome에서 봐야 합니다.

.container {
  height: 20em;
  display: flex;
  flex-direction: column;
  border: 5px solid black
}
.item {
  flex: 1;
  border-bottom: 1px solid white;
}
.item-inner {
  height: 100%;
  width: 100%;
  display: table;
}
a {
  background: orange;
  display: table-cell;
  vertical-align: middle;
}

<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>

해결책

중첩된 유연성 컨테이너를 사용합니다.

백분율 높이를 제거합니다.테이블 속성을 제거합니다.제다하를 합니다.vertical-align절대 위치 지정을 피합니다.플렉스박스를 끝까지 붙이면 됩니다.

적용합니다.display: flex 아이템flex item)으로.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% }웹킷(크롬)에서 작동하지 않습니다.

규격의 기존 구현과 일치하지 않는 방식으로 백분율 높이를 사용하고 있기 때문에 작동하지 않습니다.

높이:.5 내용물 높이:height

백분율 높이를 지정합니다.백분율은 생성된 상자의 포함 블록 높이에 대해 계산됩니다.이은 포함블높의명않이지요고절다소대위니계같으로 계산됩니다.auto.

자동의
높이는 다른 속성의 값에 따라 달라집니다.

즉, 유입된 하위 항목에 대한 백분율 높이가 작동하려면 상위 항목의 높이가 설정되어 있어야 합니다.

는 다음과 같이 ..container { height: 20em; }

는 다음과 ..item-inner { height: 100%; }

에서, 용기 – 하만그사서에단이들는, 2단계 용기.item높이가 정의되지 않았습니다.웹킷에서는 링크가 누락된 것으로 보고 있습니다.

.item-inner크롬에게 말하고 있습니다: 저에게 주세요.Chrome은 부모를 바라봅니다(.item) 참조 및 응답: 100% 무엇입니까? 아무것도 안 보여요 (무시)flex: 1규칙이 존재합니다.결적으적용다니됩로과다▁applies니▁as를 적용합니다.height: auto(내용물 높이), 규격에 따름.

반면 Firefox는 이제 부모의 유연한 높이를 자녀의 백분율 높이에 대한 참조로 받아들입니다.IE11 및 Edge도 플렉스 높이를 사용할 수 있습니다.

또한 Chrome은 수락할 것입니다.flex-grow다음을 포함하여 (모든 수치가 auto작동하지 않음)과 함께 사용될 경우 적절한 부모 참조로서flex-basis: 0하지만 이 글을 쓰는 시점에서 이 솔루션은 Safari에서 실패합니다.

#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>

네 가지 해결책

모든 상위 요소의 높이 지정

신뢰할 수 있는 크로스 브라우저 솔루션은 모든 상위 요소의 높이를 지정하는 것입니다.이렇게 하면 웹킷 기반 브라우저가 규격 위반으로 간주하는 링크 누락을 방지할 수 있습니다.

:min-height그리고.max-height허용되지 않습니다.그것은 틀림없습니다.height소유물.

자세한 내용은 여기: CSS 속성 및 백분율 값으로 작업

CSS 상대 및 절대 위치 지정

적용합니다.position: relative과 부님께모에게.position: absolute에게.

어린이의 크기를 사용합니다.height: 100%그리고.width: 100%속성을 합니다.top: 0,right: 0,bottom: 0,left: 0.

절대 위치 지정을 사용할 경우 상위 위치에 지정된 높이 없이 백분율 높이가 작동합니다.

불필요한 HTML 컨테이너 제거(권장)

주변에 두 개의 컨테이너가 필요합니까?button 이는유를 제거하면 요?.item또는.item-inner아니면 둘 다?요소가 플렉스 컨테이너로 실패할 수도 있지만 플렉스 항목일 수도 있습니다.만드는 것을 고려합니다.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>

중첩된 Flex 컨테이너(권장)

백분율 높이를 제거합니다.테이블 속성을 제거합니다.제다하를 합니다.vertical-align절대 위치 지정을 피합니다.플렉스박스를 끝까지 붙이면 됩니다.

사용해 보십시오(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

컨테이너에 Flex 속성을 지정하는 것이 나에게 도움이 되었습니다.

.container {
    flex: 0 0 auto;
}

이렇게 하면 높이가 설정되고 커지지 않습니다.

솔루션:제거한다.height: 100%.item-intervals and adddisplay: flex항목에

데모: https://codepen.io/tronghiep92/pen/NvzVoo

모바일 사파리의 경우 브라우저 수정이 있습니다. iOS 기기용 -webkit-box를 추가해야 합니다.

전.

display: flex;
display: -webkit-box;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
align-items: stretch;

을사하경우는을 사용하는 align-items: stretch;요소의 을 제거합니다.height : 100%하위 요소에서.

iOS 8, 9, 10에서도 비슷한 문제가 발생했는데 위의 정보로는 해결되지 않았지만, 하루 동안 이 문제를 해결한 후 해결책을 찾았습니다.물론 모든 사람에게 효과가 있는 것은 아니지만, 저의 경우 제 항목은 열에 쌓여 있고 콘텐츠 높이여야 할 때 높이가 0이었습니다.CSS를 행과 랩으로 전환하여 문제를 해결했습니다.이것은 당신이 하나의 아이템을 가지고 있고 그것들이 쌓여 있을 때만 작동합니다. 하지만 이것을 찾는 데 하루가 걸렸기 때문에 저는 제 수정 사항을 공유해야 한다고 생각했습니다!

.wrapper {
    flex-direction: column; // <-- Remove this line
    flex-direction: row; // <-- replace it with
    flex-wrap: wrap; // <-- Add wrapping
}

.item {
    width: 100%;
}

언급URL : https://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent

'programing' 카테고리의 다른 글

다른 테이블에 조건이 있는 테이블의 왼쪽 조인 (0)	2023.08.20
HTML 양식 게시를 위한 XMLHttp 요청 (0)	2023.08.20
PHP가 이미 데이터베이스에 연결되어 있는지 확인하려면 어떻게 해야 합니까? (0)	2023.08.20
pip을 사용하여 패키지의 여러 버전 설치 (0)	2023.08.20
JqGrid를 사용하여 select2 드롭다운의 선택된 값을 변경하려면 어떻게 해야 합니까? (0)	2023.08.20

현재글크롬/사파리가 플렉시블 부모의 높이를 100% 채우지 않음

각종 프로그래밍 정보를 다루는 블로그입니다.

mariaDB, PowerShell, Spring, oracle, AngularJS, CSS, sql-server, MySQL, jQuery, JSON, WordPress, SWiFT, Python, Ajax, C, spring-boot, Excel, Android, reactjs, bash,

Today :
Yesterday :

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

codeshow

크롬/사파리가 플렉시블 부모의 높이를 100% 채우지 않음

크롬/사파리가 플렉시블 부모의 높이를 100% 채우지 않음

해결책

설명.

네 가지 해결책

jsFiddle

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

크롬/사파리가 플렉시블 부모의 높이를 100% 채우지 않음

크롬/사파리가 플렉시블 부모의 높이를 100% 채우지 않음

해결책

설명.

네 가지 해결책

jsFiddle

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바