스크롤이있는 고정 레이아웃의 가변 크기

Question

내가 작업하고있는 페이지에서 문제가 발생했습니다. 페이지의 기본 개념은 항목 목록이며 행을 클릭하면 해당 항목의 세부 정보 페이지로 이동합니다. 내 문제는 CSS입니다.

기본적으로 페이지의 거의 모든 것이 정적 (스크롤하지 않음)이며 테이블의 내용 만 스크롤됩니다 (예, 스크롤 막대를 숨김). positin:fixed;의 좋은 비트를 사용하여 이것을 수행 할 수 있었지만 지금은 문제가 있습니다.

각 카테고리에는 테이블이있는 페이지가 있습니다 (카테고리는 왼쪽의 링크입니다). 일부 카테고리는 파란색 알약 버튼의 두 번째 행처럼 맨 위에 추가 버튼이 필요합니다. 문제는 버튼의 두 번째 행이 위쪽 영역을 더 크게 만들어 테이블이 더 작아야한다는 것입니다. 하지만 대부분의 페이지가 position:fixed;이기 때문에 스크롤 테이블의 크기는 'height : calc (100vh - 170px);'를 사용하여 주변의 고정 된 영역의 크기를 기준으로합니다. 그러나 버튼의 두 번째 행이있을 때 170px는 더 이상 작동하지 않습니다.

그래서 여기에 질문입니다. 가변 크기의 버튼 행이있는 순수 CSS를 통해 필요한 스크롤 동작을 수행 할 수있는 방법이 있습니까?

나는 flexbox를 포함하여 여러 가지를 시도했지만, 결국 calc 함수를 사용하여 테이블 본문의 높이를 설정하지 않으면이 작업을 수행 할 수 없습니다.

Answer 1

flexbox가 필요한 것 같습니다. 본질적으로 콘텐츠 섹션의 높이를 결정하는 헤더 섹션이 있습니다. 성장/축소 매개 변수가있는 Flex 열에서는이를 수행합니다.

.container { 
 
    bottom: 0px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    left: 0px; 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 0px; 
 
} 
 
.container > .header { 
 
    background: yellow; 
 
    flex-shrink: 1; 
 
} 
 
.container > .content { 
 
    background: black; 
 
    color: white; 
 
    flex-grow: 1; 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    Header content<br> 
 
    This will keep expanding in height. 
 
    </div> 
 
    <div class="content"> 
 
    The height of this black content box depends on the height of the header above. 
 
    </div> 
 
</div>