[JQUERY] 어떻게 플렉스 상자와 같은 높이를 가지고 카드 또는 유사한에서 헤더를 얻으려면?

어떻게 플렉스 상자와 같은 높이를 가지고 카드 또는 유사한에서 헤더를 얻으려면?

해결법

1. ---

   1.이러한 목표를 달성하기 위해 2 가지 방법이 기본적으로, CSS의 방법,

   이러한 목표를 달성하기 위해 2 가지 방법이 기본적으로, CSS의 방법,

   하고 스크립트 방법, 여기에 jQuery를 사용하여.

   첫 번째 스크립트 예제 프로그램에서는 모든 항목에 동일한 높이를 설정합니다.

   제 2 샘플은 동일한 행마다 높이 및 그 작업을 할 수있는 방식으로 처리 된 각 영역 / 행 높이 항목의 상위 값을 체크 (이것은 새로운 행으로 변경) 및 설정하는 설정.

   또한 최적화, 프리로드 항목의 몇 가지를 추가 단지 1 항목이나 열이있는 경우 그래서 그들을 처리하지 않습니다.

   업데이트 1 codepen

   스택 조각 1

   (함수 ($) { 이득 성능 예압 // 객체 어레이 VAR $ 헤더 = $ ( '. 헤더') // 크기 조정 실행 $ (창) .resize (함수 () { $ .fn.setHeaderHeight (0); }); $ .fn.setHeaderHeight = 함수 (높이) { // 자동으로 재설정 그렇지 않으면 우리는 확인할 수 없습니다 높이 $ ($ 헤더)에 .css ({ '높이': '자동'}); // 가장 높은 값을 얻을 $ ($ 헤더) .each (함수 (I, OBJ) { 높이 = Math.max (높이, $ (OBJ) .outerHeight ()) }); // 높이를 설정 $ ($ 헤더) .CSS ({ '높이'높이 + '픽셀'을}); } //로드 실행 $ .fn.setHeaderHeight (0); } (jQuery를)); 몸{ 패딩 : 20 픽셀; } .안건{ 신장 : 100 %; 패딩 오른쪽 : 20 픽셀; 패딩 탑 : 20 픽셀; 표시 : 플렉스; 플렉스 방향 : 열 } .헤더{ 배경 색상 : cornflowerblue; } .함유량{ 배경 색상 : 연어; 플렉스 성장 : 1; } .mycontainer { 최대 폭 : 500 픽셀; } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> <링크 HREF = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css"REL = "스타일"/>

   bippo

   일부 콘텐츠 라라 일부 콘텐츠 라라

   bippo

   일부 콘텐츠 라라

   bippo

   일부 콘텐츠 라라

   bippo

   일부 콘텐츠 라라

   bippo

   일부 콘텐츠 라라 일부 콘텐츠 라라 일부 콘텐츠 라라

   오, 아니이 헤더 랩

   일부 콘텐츠 라라

   업데이트 2 codepen

   스택 조각 2

   (함수 ($) { 이득 성능 예압 // 객체 어레이 VAR $ 헤더 = $ ( '. 헤더') 1 개 이상의 항목이있는 경우 //에만이 작업을 수행 경우 ($의 headers.length <2) {반환; } // 크기 조정 실행 $ (창) .resize (함수 () { $ .fn.setHeaderHeight (0, 0); }); $ .fn.setHeaderHeight = 함수 (높이 IDX) { // 자동으로 재설정 그렇지 않으면 우리는 확인할 수 없습니다 높이 $ ($ 헤더)에 .css ({ '높이': '자동'}); $ ($ 헤더) .each (함수 (I, OBJ) { //에만 1 개 이상의 열이있는 경우 계속 경우 ($ ($ 헤더) .EQ (0) .offset (). 가기! $ == ($ 헤더) .EQ (1) .offset (). 위) { false를 반환; } // 가장 높은 값을 얻을 높이 = Math.max (높이, $ (OBJ) .outerHeight ()) // 최고 값을 변경 한 또는 우리는 마지막 항목에 있습니다 (!. - 1) .offset () 상단 = $ (OBJ) .offset () 상단 I = 0 & & $ ($ 헤더) .EQ (I!.) {경우 행 // 세트 높이 $ ($ 헤더) .slice (IDX, ⅰ) .CSS ({ '높이'높이 + '픽셀'을}); // 리셋 높이와 시작 인덱스 높이 = 0; IDX = 1; } 다른 경우 ($ headers.length - 1 == I) { // 마지막 행 $ ($ 헤더) .slice (IDX 난 + 1) .CSS ({ '높이'높이 + '픽셀'}); } }); } //로드 실행 $ .fn.setHeaderHeight (0, 0); } (jQuery를)); 몸{ 패딩 : 20 픽셀; } .안건{ 신장 : 100 %; 패딩 오른쪽 : 20 픽셀; 패딩 탑 : 20 픽셀; 표시 : 플렉스; 플렉스 방향 : 열 } .헤더{ 배경 색상 : cornflowerblue; } .함유량{ 배경 색상 : 연어; 플렉스 성장 : 1; } .mycontainer { 최대 폭 : 500 픽셀; } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> <링크 HREF = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css"REL = "스타일"/>

   bippo

   일부 콘텐츠 라라 일부 콘텐츠 라라

   bippo

   일부 콘텐츠 라라

   bippo

   일부 콘텐츠 라라

   bippo

   일부 콘텐츠 라라

   bippo

   일부 콘텐츠 라라 일부 콘텐츠 라라 일부 콘텐츠 라라

   오, 아니이 헤더 랩

   일부 콘텐츠 라라

   일부는 일반 자바 스크립트를 선호, 나는 잘 적용 (모든 항목에 동일한 높이를 설정)와 같은 샘플로 업데이트 / 계산 된 높이 값을 동적으로 클래스를 추가 할 수 있습니다.

   스택 미리보기

   (함수 (d, t, H) { / *이 어떤 변수를 미리로드 * / H = (d.head || d.getElementsByTagName ( "헤드") [0]); VAR 항목 d.querySelectorAll = ( '헤더.'); 크기 조정 함수 () { VAR 높이 = [], i가 0, CSS =; 우리는 적절한 가치를 얻을 수 있도록 / * 삭제 세트 스타일 * / removeElement ( 'head_dynamic_css'); 위한 (I = 0; I <링크 HREF = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css"REL = "스타일"/>

   bippo

   일부 콘텐츠 라라 일부 콘텐츠 라라

   bippo

   일부 콘텐츠 라라

   bippo

   일부 콘텐츠 라라

   bippo

   일부 콘텐츠 라라

   bippo

   일부 콘텐츠 라라 일부 콘텐츠 라라 일부 콘텐츠 라라

   오, 아니이 헤더 랩

   일부 콘텐츠 라라

2. ---

   2.여기 jQuery를 내 접근 방식을 가지고있다. 상황이 더 당신은 당신이 동일한 각 행의 높이를 원하는 원하기 때문에 복잡하지만, 나머지 독립적 얻을.

   여기 jQuery를 내 접근 방식을 가지고있다. 상황이 더 당신은 당신이 동일한 각 행의 높이를 원하는 원하기 때문에 복잡하지만, 나머지 독립적 얻을.

   내가 무슨 짓을했는지하는 것은 그래서 나중에 우리가 그 클래스를 사용하여 전체 행을 선택할 수 있습니다, 그들에게이 위치를 가지고있는 클래스를 추가하는 모든 헤더를 통해 행 식별자 루프로 각 요소의 상단 위치를 사용합니다. 모든 루프, 나는 높이를 확인하고 최대 값을 저장하고, 내가 감지 할 때 나는 클래스 I을 사용하여 이전 행의 모든 ​​요소에 행 최대 높이를 적용 (상단 위치가 변경) 새 행에 '할당했습니다.

   여기에 코드입니다 ...

   function adjustHeaderHeights() {
   
       // First reset all heights to just increase if needed.
       $('div.header').css('height','auto');
   
       var curRow=$('div.header').first().offset().top,
           curRowMaxHeight=$('div.header').first().height();
       var n = $('div.header').length;
   
       $('div.header').each(function(index) {
   
           // Get header top position as row identifier, and add it as a class.
           var rowId = $(this).offset().top;
           $(this).addClass('rowid'+rowId);
   
           if (rowId != curRow) {  // It's a new row.
               $('div.header.rowid'+curRow).height(curRowMaxHeight);
               curRow = rowId;
               curRowMaxHeight=$(this).height();
           }
           else {
               curRowMaxHeight = $(this).height() > curRowMaxHeight ? $(this).height() : curRowMaxHeight;
   
               // It's the last header element, so we adjust heights of the last row.
               if (index+1 == n)
                   $('div.header.rowid'+curRow).height(curRowMaxHeight);
           }
       });
   
   }
   
   $(window).resize(function() {
       adjustHeaderHeights();
   });
   
   adjustHeaderHeights();
   

   나는 그것이 도움이되기를 바랍니다

from https://stackoverflow.com/questions/46596170/how-to-get-header-from-cards-or-similar-to-have-the-same-height-with-flex-box by cc-by-sa and MIT license