시맨틱 UI 사이드 바, 부분 높이

Question

모두!

내가 응용 프로그램 쓰고 싶은 (전자 + 뷰를 구체적으로) 그 탐색을 제공하며, 물건 시맨틱을 사용하여 :

내가 다음에 대해 가고 싶어하는 방법을 알아 내려고 시도하고 있습니다 때문에 쓰고 있어요 창의 왼쪽에있는 UI 사이드 바.

문제는 윈도우의 높이의 75-80 % 정도만 차지하고 싶습니다. 하단은 20-25 %의 정적 상자입니다 (저는 Steam을위한 작은 개발 도구를 사용하고 있습니다). 게임이므로이 상자에는 시맨틱 메뉴의 선택된 노드에 대한 정보가 포함됩니다).

내가 달성하기 위해 무슨 희망의 예로서 역할을하는 (정말 심하게 그려) 이미지 첨부했습니다 :

을 어쨌든, 나는 때문에, 이것에 대해 이동하는 방법을 잘 모르겠어요 나는 사이드 바 구성 요소의 높이를 제한하는 방법에 대해 정말로 모르겠다. (나는 CSS를 사용하는 것과는 반대로 Semantic의 Vue Component 버전을 사용할 것이다.)

도움이 될 것이다. -대단히 감사합니다.

나는 이것이 Flex와 같은 것으로 가능할 수도 있다고 생각하지만, 나는 몰라.

실제 사이드 바 구성 요소를 전혀 사용하지 않고이 프로젝트에 대한 일부 Flex 지원 레이아웃 작업 만하는 옵션도 있습니다.

미리 감사드립니다.

Answer 1

이것은 Flex와 같은 제품에 가장 적합합니다. 기본적으로 컨테이너 두 개를 포함 할 수 있습니다. 부모를 세로로 정렬하고 원하는 너비로 스팬을 설정하십시오. 예 : 다음

body { 
    margin: 0; 
} 

.left-nav { 
    width: 300px; 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
} 

.upper { 
    width: 100%; 
    height: 100%; 
    background-color: red; 
} 

.lower { 
    width: 100%; 
    height: 40%; 
    background-color: blue; 
} 

당신이 시작하는 펜입니다 : https://codepen.io/potatogopher/pen/WZGBxZ