부모의 100 % 높이로 고정 너비 설정

debugcn 에 게시 Dev

샘

다음 HTML 에서 요소 의 높이 left와 right100 % 를 설정하고 싶습니다 parent. 또한 leftdiv의 너비는 고정되어 있습니다. 는 right나머지 폭을 모두 사용해야합니다.

display: flex;부모 div에서 사용하기 때문에 div의 너비가 left일정하게 유지되지 않는다고 생각합니다. 고정 너비를 설정하고 나머지 공간을 모두 오른쪽에 할당하려면 어떻게해야합니까?

편집 : 의 calc(100-52px)높이입니다 parent. 문제는 창 크기를 조정할 때 변경되지 않도록 100px의 고정 너비를 왼쪽으로 설정하는 것입니다.

내가 시도하는 것은 다음과 같습니다.

body {
  padding: 0;
  margin: 0;
}

.parent {
  background: red;
  display: flex;
  height: calc(100vh - 52px);
  
}

.left {
  width: 100px;
  background: yellow;      
  
}

.right {    
  background: orange;
  width: 100%;  
  
}

<div class="parent">
 
     <div class="left">the width should be fixed, not flexible</div>  
     <div class="right">width should be all of the remaining</div>
  
</div>

버크 쿠르 쿠오 글루

width: calc(100% - 100px)또는 flex: 1올바른 div를 사용할 수 있습니다 .

백분율 값은 상위 요소에서 계산되므로 나머지 영역을 얻으려면 100 %에서 정적 값을 추출해야합니다.

그러나 여기서 이미 플렉스 컨테이너를 사용하고 있으므로 flex : 1을 설정하면됩니다. flex-grow : 1의 약어입니다. 그러면 다른 항목이 없으므로 컨테이너가 상위 컨테이너의 모든 추가 공간을 차지할 수 있습니다. 사용할 수 있습니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

부모의 100 % 높이로 고정 너비 설정

부모의 100 % 높이로 고정 너비 설정

높이와 너비가 100 % 인 div 내부의 div 높이를 %로 설정

부모 너비를 기준으로 100 % 너비를 고정 요소로 설정

최소 높이가 100 % 인 컨테이너의 자식으로 최소 높이를 100 %로 설정합니다.

SVG 요소의 너비와 높이를 100 %로 설정하여 얻을 수있는 것이 있습니까?

조부모의 DIV를 100 % 높이로 만들고 조부모의 너비를 늘립니다.

jQuery로로드 된 이미지의 너비와 높이 설정

글꼴 Awesome Icon의 높이와 너비를 부모 컨테이너의 전체 너비와 높이로 설정하는 방법이 있습니까?

무대 너비와 높이를 100 % React Konva로 설정하는 방법

href 너비와 높이를 100 %로 설정할 수 있습니까?

동적 보고서-보고서의 너비 및 높이 설정

본문 너비를 문서의 100 %로 설정

QuaggaJs의 너비를 100 %로 설정 하시겠습니까?

콘텐츠 높이를 본문 높이의 100 %로 설정

고정 여백이있는 100 % 너비

div 내부 양식의 너비를 부모의 최대 너비로 설정

jquery로 rect의 높이와 너비를 설정하는 방법

고정 너비 및 높이를 svg로 설정하는 방법

너비 / 높이 비율이 고정 된 경우 순수한 CSS를 사용하여 100 % 너비에 따라 <img> 높이를 설정할 수 있습니까?

너비를 부모 너비로 조정하고 더 높으면 자릅니다.

호버 오버레이의 높이를 컨테이너의 100 %로 설정할 수 없습니다.

Flutter의 너비와 동일한 컨테이너 높이 설정

프로그래밍 방식으로 GridView 및 ImageView의 너비와 높이 설정

이미지로 UIButton의 높이와 너비를 어떻게 설정합니까?

이미지 너비와 높이를 100 x 100 비율로 조정하려면 어떻게해야합니까?

높이를 너비의 백분율로 설정 하시겠습니까?

JComponent의 너비와 높이를 인스턴스 변수로 설정

고정 사이드 바 오른쪽에있는 div의 너비를 뷰포트의 나머지 100 %로 설정합니다.

높이를 100 %로 설정할 때 React Apexchart가 부모 높이를 사용하지 않습니다.

대부분의 내부 HTML 요소의 높이와 너비 설정