2つのdivが重複している場合にクラスを削除する

Question

フレックスボックスを使用してコンテンツを「メイン」タグの内側に垂直に配置していますが、余分なコンテンツが追加された場合、 divが画面上の特定の垂直位置（256px - ヘッダーとして設定された高さ）を上回った場合、 'main'からクラスを削除します（現在は垂直に設定されています）。

私は、.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を使ってヘッダの下に置かれるようにしました。

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; 
} 

それでも違ったテキストを揃えたい場合は、.vertical内部に別のタグ内にネストしたコンテンツをできました。同様に：

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

さらに、.contentセクションに垂直スタイルを追加します。