Question

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

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

例如，如果你使用float，你可以使用clear：both来重置位置，是否还有可能位置：fixed？

Answer 1

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

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

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

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

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

Answer 2

仅CSS解决方案

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

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

然后有一个单独的CSS样式表来更改常规height与移动viewport的{{1}}。

（或者请参阅下面的JavaScript解决方案，动态设置viewport属性。）

jsFiddle

HTML：

height

CSS（常规版）：

<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;
}

JavaScript解决方案

HTML （可复制和粘贴）：

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

Answer 3

使用z-index（css）一个div使它：z-index：-1; 对于其他z-index：1;

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

Answer 4

我认为您想要的是添加一个与标题高度相等的margin-top。对于边距底部做同样的事情来容纳页脚。

Answer 5

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

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

Answer 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>

使用位置时复位位置：固定

6 个答案: