当两个 div 重叠时删除一个类答案

【问题标题】：Remove a class when two divs overlap当两个 div 重叠时删除一个类
【发布时间】：2017-06-04 10:17:51
【问题描述】：

我使用 flexbox 将我的内容垂直居中在“主”标签内，但是当添加太多内容时，它会溢出到“标题”中。有没有一种方法可以计算出如果 div 超出屏幕上的某个垂直位置（256px - 高度设置为标题），它会从“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

我确实希望这是有道理的。非常感谢。

【问题讨论】：

标签： javascript jquery position removeclass

【解决方案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 部分。

【讨论】：