当两个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重叠时删除课程

回答

相关问题