Question

我已经使用flexbox将我的内容垂直居中于＆＃39; main＆＃39;标签，但是当添加太多内容时，它会溢出到标题中。有没有办法我可以计算出如果div超过屏幕上的某个垂直位置（256px - 高度设置为标题），它会删除“＆＃39; 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

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

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

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

1 个答案: