css - 推送 div 内容以进行提醒

Question

我有一个固定位置的导航栏，如果只有警告消息，我会尝试下推所有内容。警报也将被修复

我尝试将我的内容包装在一个 div 中，但它什么也没做。

我使用基础 6 我在这里找到了我正在寻找的东西 http://www.bootply.com/4FSUjc2qej

但它是 Bootstrap ..但上面的代码仅在导航是静态的情况下才有效。如果显示固定在导航上方，我需要该消息。但当点击关闭网站时，幻灯片会恢复正常。

<div class="alert alert-info" role="alert">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Holy guacamole!</strong> Best check yo self, you are looking very good.
</div>

<div id"site">
<nav class="nav">My Nav</nav>
<div>content</div>
</div>


    .alert-info {
      margin-bottom:0;
      position: fixed
    }


.nav {
    min-height: 50px;
    height: 50px;
    overflow: visible;
    background-color: #000;
    color: #fff;
    position: fixed;
    top: 0;
    z-index: 10000;
}

Answer 1

您可以通过为警报设置固定高度来实现此目的，例如 40 像素。然后你可以为动画使用transition，像这样:

function showAlert() {
  document.getElementsByClassName("alert")[0].classList.add("active");
}

function closeAlert() {
  document.getElementsByClassName("alert")[0].classList.remove("active");
}

.alert {
  position: fixed;
  top: 0;
  height: 0;
  width: 100%;
  background-color: blue;
  color: white;
  transition: height .2s;
}

.alert.active {
  height: 40px;
}

#site {
  transition: margin-top .2s;
}

.alert.active + #site {
  margin-top: 40px;
}

.nav {
  display: block;
  width: 100%;
  min-height: 50px;
  height: 50px;
  overflow: visible;
  background-color: #000;
  color: #fff;
  position: fixed;
  top: 0;
  z-index: 10000;
  transition: top .2s;
}

.alert.active + #site .nav {
  top: 40px;
}

.content {
  padding-top: 59px
}

<div class="alert alert-info" role="alert">
  <button type="button" class="close" data-dismiss="alert" onclick="closeAlert()">×</button>
  <strong>Holy guacamole!</strong> Best check yo self, you are looking very good.
</div>

<div id="site">
  <nav class="nav">My Nav</nav>
  <div class="content">
    <button onclick="showAlert()">alert</button>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

因此当显示警报时，您必须

1. 设置警报的高度
2. 设置站点的顶部偏移量
3. 设置导航栏的顶部偏移量