如何让 div 下推所有内容答案

【问题标题】：How to make div push down everything below如何让 div 下推所有内容
【发布时间】：2015-10-16 03:31:40
【问题描述】：

所以我的问题是如何让 div 下推它之后的所有内容，即使之后的元素具有固定位置。

让我解释一下场景：

我有以下结构：

<body>
   <div class="top_menu">
   </div>
   <div class="content">
   </div>
</body>

其中.top_menu 有一个position:fixed; 和top:0;

现在使用 JavaScript，我在 <body> 之后插入一个新 div，并将其余部分包装在另一个 div 中，最终得到如下所示的内容。

<body>
   <div id="notice_bar">
   </div>
   <div id="wrap">
      <div class="top_menu">
      </div>
      <div class="content">
      </div>
   </div>
</body>

现在有没有办法让#notice_bar div 总是下推#wrap div 及其所有内容？

更改.top_menu 的position:fixed; 属性不是一个选项，因为我正在处理的这个脚本应该适用于任何给定的网站。

我的想法真的用完了，所以任何提示都将不胜感激。谢谢！

编辑：这是我现在正在处理的特定场景，以防有人觉得足够大方可以使用它:) http://mirlostudio.com/choeducators

【问题讨论】：

也许使用display: block 作为#notice_bar div？
将您自己的代码/HTML 元素插入到其他网站中，并期望一切都可以正常工作，这是一个有点过分的愿望——那里的布局的多样性简直就是大。您当然可以浏览脚本中的“主机”页面，尝试识别所有（或某些）固定元素，并操纵它们的坐标——但这仍然很可能破坏任何数量的网站上的东西（尤其是这样，如果他们使用自己的脚本来动态处理定位。）
如果您只是为人们提供选项来自定义脚本插入的元素的显示方式和位置，这可能是最好的。

标签： javascript css css-position

【解决方案1】：

如果您将 .wrap 容器设置为 position: relative; - .wrap 容器内的所有绝对定位元素都将与其父容器一起移动。

【讨论】：

谢谢克里斯蒂安。问题是#wrap 里面有位置：fixed; 的元素。而那些似乎并不关心#wrap 相对位置......

【解决方案2】：

如果您希望通知栏保持在顶部，而菜单随页面滚动，您可以使用一点 jQuery/javascript 来切换一个为菜单添加固定定位的类：

Working Example

$(window).scroll(function() {
  $('.top_menu').toggleClass('scrolling', $(window).scrollTop() > $('#wrap').offset().top);
});

.top_menu {
  height: 20px;
  width: 100%;
  background: blue;
}
.content {
  position: relative;
  height: 600px;
  background: grey;
}
.scrolling {
  position: fixed;
  top: 0px;
  right: 8px;
  left: 8px;
  width: auto;
  z-index: 100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notice_bar">Notice Bar</div>
<div id="wrap">
  <div class="top_menu">Top Menu</div>
  <div class="content">Content</div>
</div>

【讨论】：

你好@apaul34208。非常感谢你的例子。虽然这可能有效，但问题是修改 .top_menu 元素不是一个选项，因为我正在处理的脚本应该适用于任何给定的网站，而不仅仅是示例中的那个。
@GuillermoCarone “任何给定的网站”是什么意思？该脚本适用于任何具有类似标记的网站，前提是您调整类/ID 名称。
您是否在寻找纯 css 方法？像这样：jsfiddle.net/apaul34208/kfjndtok/2
@aoayk34208 我的意思是它是我正在开发的一个 WP 插件，所以如果安装了插件，它应该可以在任何网站上运行。你的例子给了我一些继续玩的想法。谢谢！ :)
@GuillermoCarone 啊，我明白了，这可能应该是问题所在。在这种情况下，使用 Wordpress 特定的、基于 php 的解决方案可能会更好。 WordPress 提供了一些钩子/API 函数，可以让您的生活更轻松。