두 div가 겹치는 경우 클래스 제거

Question

flexbox를 사용하여 '메인'태그 내부에 컨텐츠를 세로로 배치했지만 너무 많은 컨텐츠가 추가되면 '헤더'로 넘칠 수 있습니다. div가 화면의 특정 세로 위치 (헤더로 설정된 높이)보다 높으면 'main'(현재는 .vertical로 설정) 클래스를 제거한다는 계산 방법이 있습니까?

.removeClass()가 클래스를 제거한다는 것을 알고 있지만, 수직 위치 계산을 시작할 위치를 모른다.

HTML

<header>Nav</header> 
<main class="vertical">A lot of text here</main> 

CSS

body, html{margin:0; height:100%} 

header{width:100%; height:256px; background:red;} 
main{width:100%; height: calc(100% - 256px); background:#fff;} 

.vertical{ 
display: flex; 
flex-direction: column; 
justify-content: center; 
} 

Fiddle

내가 의미가 희망을. 감사합니다.

Answer 1

나는 당신의 목표를 오해 할 수도 있지만 화면상의 위치를 ​​계산할 필요가없는 것처럼 보입니다. 탐색 막대가 있으므로 항상 표시되어야하며 내용이 겹치지 않아야합니다. justify-content: flex-start을 사용하여 콘텐츠가 헤더 아래에 항상 있도록 코드를 약간 변경했습니다. 당신이 둥지 .vertical 안에 다른 태그 내의 내용을 수

body, html { 
    margin: 0; 
    height: 100% 
} 

header { 
    display: block; 
    width: 100%; 
    height: 256px; 
    background: red; 
} 

main { 
    width: 100%; 
    height: 100%; 
    background: #fff; 
} 

.vertical{ 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
} 

당신은 여전히 ​​다른 텍스트를 정렬 할 경우

. 그래서 같이 : 다음

<header>Nav</header> 
<main class="vertical"> 
    <p class="content">all the text...</p> 
</main> 

그리고 .content 부분을 수직 스타일을 추가합니다.