使用位置时重置位置：固定答案

【问题标题】：Reset position when using position:fixed使用位置时重置位置：固定
【发布时间】：2012-12-07 12:49:24
【问题描述】：

我想制作一个网站，其中（动态高度）页眉和页脚具有固定位置。内容应直接在标题下方开始。我做了一个快速的example。（黄色和红色顶部位置相同，我希望黄色 DIV 从红色 DIV 下方开始。）

如果将 header 位置设置为固定，则内容 DIV 将放置在 header 的相同顶部位置。

比如用float，可以用clear:both来重置位置，是不是也可以用position:fixed？

【问题讨论】：

标签： html css css-position

【解决方案1】：

我知道这是一篇旧帖子，但最近我自己也遇到了这个问题。所以只是想我会分享我的解决方案（尽管我还没有完全测试它 - 在此处添加免责声明）。

我在固定容器（页面顶部）下方创建了另一个容器（div），具有相同的设置、类等和内容。

然后我添加了一个样式来将第二个 div 重置为 position:static, visibility:hidden。你真的不需要隐藏它，因为它完全被固定的 div 覆盖；但以防万一它是不识别位置的旧浏览器：固定。

无论如何，这将为您的内容上方提供一个缓冲区，该缓冲区应该始终是正确的高度。缺点是，如果有动态内容，则该区域的页面中将包含两次，但您需要该内容以确保隐藏的 div 高度正确。

不是一个完美的解决方案，但我能想到的最好的解决方案......使用 javascript 吧。

【讨论】：

【解决方案2】：

纯 CSS 解决方案

使用某种方式填充页眉在屏幕顶部占据的空间：

padding-top:
margin-top:
position:relative + top:

然后有一个单独的 CSS 样式表将 height 更改为常规 viewports 与移动 viewports。

（或见下文动态设置height 属性的JavaScript 解决方案。）

jsFiddle

HTML：

<html>
  <body>
    <div id="header">
      Header
    </div>
    <div id="wrapper">
      <p>First Row</p>
      <p>Next row</p>
      <p>...</p>
      <p>Last row</p>
    <div>
  </body>
</html>

CSS（普通版）：

#header {
  position:fixed;
  height:100px;
  width:100%;
  background-color:green;
  color:white;
}
#wrapper {
  position:relative;
  top:101px;
}

CSS（移动版）：

#header {
  height:50px;
}
#wrapper {
  top:51px;
}

JavaScript 解决方案

HTML （可复制粘贴）：

<head>
  <style>
    #header {
      position:fixed;
      height:100px; /* try different values here! */
      width:100%;
      background-color:green;
      color:white;
    }
    #wrapper {
      position:relative; /* look Mom no height! */
    }
  </style>
</head>
<html>
  <body>
    <div id="header">
      Header
    </div>
    <div id="wrapper">
      <p>First Row</p>
      <p>Next row</p>
      <p>...</p>
      <p>Last row</p>
    <div>
    <script language="javascript">
      document.getElementById('wrapper').style.top = String(document.getElementById("header").offsetHeight + 1);
    </script>
  </body>
</html>

【讨论】：

看来我想要的（使用高度动态的标题）唯一的方法是设置高度，或者将边距与jQuery一起使用来获取标题的高度。
嗯，没听说过 jsFiddle，不错的应用！
您的答案非常适合具有固定高度的标题...但是我的标题的高度可以改变。所以我必须使用javascript来获取高度。还是谢谢！
您可以这样做，或者为移动设备使用单独的 CSS。
我不得不说，这个答案很明确，而且有据可查...谢谢，我会用你的答案！

【解决方案3】：

使用 z-index (css) 为一个 div 制作：z-index:-1; 对于其他 z-index:1;

http://www.w3schools.com/cssref/pr_pos_z-index.asp

【讨论】：

z-index 只是改变了 DIV 在顶部和 DIV 在底部......但这不是我想要的。

【解决方案4】：

我认为您想要的是添加一个等于页眉高度的边距顶部。对 margin-bottom 执行相同操作以容纳页脚。

【讨论】：

这是我的第一个想法，但是当你不知道标题高度时，你不能使用这个想法......我正在使用一个 Drupal 模板，它可以改变移动设备、小屏幕和大屏幕的布局...
我明白了，你应该说你的问题中有一个动态标题。您可以使用 jquery (javascript) 来查找页眉和页脚的高度，然后将这些值设为 margin-top 和 margin-bottom。
更改了问题。标题的高度确实是动态的。你不认为这仅使用 CSS 是可行的吗？
不，您必须使用 javascript。为什么不想使用它？
如果有 CSS 解决方案，使用 jQuery 会很不明智，但如果没有其他方法我不介意使用它，谢谢。

【解决方案5】：

您必须使用padding-top 和padding-bottom。在您的示例中，如果您将padding-top: 25px; 添加到样式中，它将显示在顶部固定div 下方。

如您所知，固定位置会显示在浏览器的同一位置，并且不会在您滚动时移动。其余的“正常”内容不受固定定位元素的影响，因此您必须使用填充和边距来创建一些缓冲区空间。

【讨论】：

见上面的评论...当你把窗口变小时，标题DIV的高度会改变，所以...你不知道高度。
您可以将width 或height 分配给您的固定DIV，以防止它动态改变大小。

【解决方案6】：

    <body>

   <div style="background-color: red; position: fixed;width:100%;">This is a test with position set  to fixed</div>
  <div style="background-color: yellow; height: 1000px;">This is content that should  start beneath the fixed DIV</div>

    </body>

【讨论】：