CSS Flex를 사용하여 왼쪽 및 오른쪽 레이아웃의 동일한 높이 테두리를 달성하는 방법은 무엇입니까?

CSS Flex 레이아웃에서 왼쪽 및 오른쪽 열 구현을위한 팁 윤곽 경계

CSS Flex 레이아웃을 사용하는 경우 종종 페이지를 두 부분으로 나누어야하며 하단 부분은 두 개의 열로 세분됩니다. 왼쪽 및 오른쪽 열의 높이가 고정되지 않은 경우, 이들을 나누는 경계가 가장 높은 높이까지 자동으로 확장 할 수있는 방법은 무엇입니까? 이 기사는이 문제를 해결하기위한 두 가지 솔루션을 제공합니다.

장면 : 페이지는 상단과 하단 부품의 두 부분으로 나뉘며 하단은 플렉스 레이아웃을 채택합니다. 왼쪽 및 오른쪽 열의 높이는 불확실하므로 두 열 사이에 높이의 경계가 필요합니다.

솔루션 1 : 기존 구조를 기반으로 한 jQuery 조정

HTML 구조를 수정할 수없는 경우이 방법을 사용할 수 있습니다. 첫째, height: min-content; 올바른 요소의 경우 ( .rht 라고 가정) 높이가 내용에 적응할 수 있도록합니다. 그런 다음 jQuery를 사용하여 .rht 의 높이를 얻고 왼쪽 요소의 자식 요소에 적용하십시오 ( .lft 라고 가정) :

 h = $ ( ". rht"). 높이 () 'px';
$ ( ". lft div"). css ({height : h});

이 메소드는 JavaScript에 의존하며 페이지가로드 된 후에 실행해야합니다.

솔루션 2 : HTML 구조 및 CSS 스타일을 조정하십시오

이 방법은 JavaScript없이 더 간단하고 효율적입니다. HTML 구조 및 CSS 스타일을 조정하여 윤곽 경계를보다 우아하게 구현할 수 있습니다.

개선 된 HTML 구조 :

<div class="wrapper">
  <div class="top">최고의 콘텐츠</div> 
  <div class="content"> 
    <div class="lft">
      <div>왼쪽의 내용</div>
    </div>
    <div class="rht">
      <div>오른쪽의 내용</div>
    </div>
  </div>
</div>

해당 CSS 스타일 :

 * {
  패딩 : 0;
  국경 : 0;
  여백 : 0;
  박스 사이징 : 국경 박스; /* 요소 크기 계산에 영향을 미치는 경계를 피하기 위해 추가하는 것이 좋습니다.*/
}

.wrapper {
  높이 : 100VH; /* 전체 뷰포트 높이를 차지합니다*/
  디스플레이 : Flex;
  플렉스 방향 : 열; /* 수직 레이아웃*/
}

.맨 위 {
  높이 : 100px;
  배경 : #e3E3E3;
}

.콘텐츠 {
  디스플레이 : Flex;
  플렉스 : 1; /* 나머지 공간을 차지하십시오*/
  최소-높이 : 0; /* 최소 높이가 레이아웃에 영향을 미치는 방지*/
}

.lft {
  플렉스 : 1; /* 나머지 공간을 차지하십시오*/
}

.rht {
  너비 : 600px;
  왼쪽 경계 : 1px 솔리드 레드;
  최소-높이 : 0; /* 최소 높이가 레이아웃에 영향을 미치는 방지*/
}

이 계획에서 :

• .wrapper flex-direction: column; 수직 레이아웃을 달성합니다.
• .content flex: 1; 높이가 적응할 수 있도록 나머지 공간을 차지합니다.
• .lft 및 .rht a use min-height: 0; 최소 높이가 높이를 제한하는 것을 방지합니다.
• 분할 라인은 .rht 에서 직접 border-left 됩니다.

솔루션 2는 성능이 향상되고 유지하기 쉬운 순수한 CSS를 통해 구현됩니다. 계획 2의 사용에 우선 순위를 부여하는 것이 좋습니다.

위 내용은 CSS Flex를 사용하여 왼쪽 및 오른쪽 레이아웃의 동일한 높이 테두리를 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!