當兩個div重疊時刪除課程

我已經使用flexbox將我的內容垂直居中放置在'main'標記內，但是當添加太多內容時，它會溢出到'標題'中。有沒有一種方法可以計算出，如果div高於屏幕上某個垂直位置（256px - 高度設置爲標題），它會從'main'（當前設置爲.vertical）中刪除一個類。當兩個div重疊時刪除課程

我知道.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

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

來源

2017-01-19 user2538833

我可能會誤解你的目標，但似乎並不需要計算屏幕上的位置。由於您有導航欄，因此應該始終可見並且內容不應重疊。我對您的代碼進行了一些更改，允許內容始終使用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部分。

來源

2017-01-19 16:34:21

當兩個div重疊時刪除課程

回答

相關問題