12

我制作了一个 div 并给了它位置：使用此样式表修复：

CSS

position: fixed;
top: 35px;
z-index: 9999;
height:60px;
background:#000;
width:100%;

现在我想要的是：如果这个 div 的高度为零，那么紧随其后的 div 应该代替上面的 div。如果 div 的高度不为零，则该 div 之后的下一个 div 应该与上面的 div 有一个边距，这样两个 div 就不会相互重叠。

4

4 回答 4

16

当你有一个固定的（或绝对的）元素时，它后面就没有元素了。固定元素从文档流中取出。

如果你想让两个元素在一个固定的位置一个接一个，做一个固定的容器，把两个元素放在里面。

您可以在它们周围放置另一个带有上边距的容器，并在第二个元素上设置上边距。如果第一个元素为空，则没有任何内容可设置边距，因此边距将在容器外折叠，第二个元素将位于容器顶部。

（需要第二个容器，因为边距不会在固定元素之外折叠。）

演示：http: //jsfiddle.net/Guffa/r5crS/

于 2012-09-13T11:53:55.283 回答
6

其他海报是正确的，position: fixed因为布局元素的设置破坏了文档流程；有时是有意的（例如用于固定位置导航）。

这是我用来规避导航高度可能改变的液体布局中的问题的 jQuery 片段：

var menuHeight = $("header").height();
$("main").css("padding-top", menuHeight);
$( window ).resize(function() {
    var menuHeight = $("header").height();
    $("main").css("padding-top", menuHeight);
});

Main 是我网站上的主要内容，因为页面的宽度会更改主要内容顶部的填充更改为标题元素的高度，这模仿了它在文档流中的状态。

注意：代码在加载（针对不同的设备大小）和窗口调整大小（针对用户窗口大小调整）时运行一次。这很容易变得更整洁，但对我来说效果很好。

于 2016-09-23T20:43:37.407 回答
5

如果你可以使用 jQuery ：

$(document).ready(function() {
  var height = $("#one").height();
  if(height > 0)
  {
      $("#two").css("margin-top","10px");
  }
});

演示

于 2012-09-13T11:54:02.210 回答
0

受到其他答案的严重影响，这里有一个稍微简单的版本，不需要第二个元素来添加内容。只需设置整个文档正文的上边距，确保其余非固定内容位于顶部固定 div 下方：

        function set_body_top_margin() {
            var menuHeight = $("#top_div").height();
            $(document.body).css("margin-top", menuHeight);
        }
        $(document).ready(set_body_top_margin);
        $(window).resize(set_body_top_margin);

注意：如果您的顶部 div 因任何原因更改大小，则必须在set_body_top_margin()其他地方添加另一个调用。

于 2021-08-30T23:03:36.230 回答