html - 在顶部同级具有固定位置的情况下向同级 div 添加 margin-top

Question

仪表板和内容类在应用程序中是通用的(这意味着它们在每个模板或页面上)。 header 类仅在某些页面上可用。

<div class="dashboard">
      <div class="header"></div>
      <div class="content"></div>
    </div>

我想要的是，将规则“固定位置”添加到 header 类，并将其固定到它存在的那些页面的页面顶部，并在整个窗口中为其设置白色背景。现在，当我这样做时，带有内容类的 div 中的内容位于标题下方。但是，我希望该内容具有上边距，并且仅在标题存在的页面上位于标题 div 下方。

我知道我可以向内容类添加上边距或边距，但这会影响包含该内容类的所有页面，但我不希望这种情况发生？

我怎样才能有条件地实现这个目标？

Answer 1

我认为对于标题后跟内容的页面，您可以将样式应用为 .header ~ .content，而对于其他页面，您可以将其样式设置为 .content

检查这个片段

.header{
  position:fixed;
  background:red;
  left:0;
  top:0;
  width:100%;
}
.header ~ .content{
  margin-top:50px;
  background:gray;
}

<div class="dashboard">
  <div class="header">khfdsfjksd</div>
  <div class="content">
    Lorem ipsum dolor sit amet, facilisis orci, risus accumsan mauris mi aliquam, mattis felis, condimentum vel arcu pellentesque vulputate et scelerisque. A mi ut arcu nunc odio, nunc aliquam, vel libero orci bibendum pellentesque. Placeat eget mauris tortor dignissim habitant, viverra nunc urna in. Massa lectus mauris felis nibh. Non imperdiet ut, cum vivamus soluta porta sed, quisque erat diam blandit dolor.Lorem ipsum dolor sit amet, facilisis orci, risus accumsan mauris mi aliquam, mattis felis, condimentum vel arcu pellentesque vulputate et scelerisque. A mi ut arcu nunc odio, nunc aliquam, vel libero orci bibendum pellentesque. Placeat eget mauris tortor dignissim habitant, viverra nunc urna in. Massa lectus mauris felis nibh. Non imperdiet ut, cum vivamus soluta porta sed, quisque erat diam blandit dolor.Lorem ipsum dolor sit amet, facilisis orci, risus accumsan mauris mi aliquam, mattis felis, condimentum vel arcu pellentesque vulputate et scelerisque. A mi ut arcu nunc odio, nunc aliquam, vel libero orci bibendum pellentesque. Placeat eget mauris tortor dignissim habitant, viverra nunc urna in. Massa lectus mauris felis nibh. Non imperdiet ut, cum vivamus soluta porta sed, quisque erat diam blandit dolor.
  </div>
</div>

<div class="content">
  sfhdskfdsk
</div>

在 SCSS 中你的代码应该是这样的

.dash-board {
  .header {
    position: fixed;
    background: red;
    left: 0;
    top: 0;
    width: 100%;
    ~ .content {
      margin-top: 50px;
      background: gray;
    }
  }
}

希望对你有帮助