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

Posted 2023-02-26

【中文标题】当两个 div 重叠时删除一个类

【英文标题】：Remove a class when two divs overlap

【发布时间】：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, htmlmargin:0; height:100%

headerwidth:100%; height:256px; background:red;
mainwidth:100%; height: calc(100% - 256px); background:#fff;

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

Fiddle

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

【参考方案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 部分。