兩個div重疊時刪除一個類

Question

我已經使用flexbox將內容垂直居中在“ main”標簽內，但是當添加太多內容時，它會溢出到“ header”中。 有沒有一種方法可以計算出，如果div超出屏幕上某個垂直位置（256像素-設置為標題的高度），它將從“主”中移除一個類（當前設置為.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;
}

小提琴

我確實希望這是有道理的。 非常感謝。

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部分。