4

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

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

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

4

6 回答 6

3

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

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

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

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

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

于 2012-12-07T04:49:24.000 回答
1

仅 CSS 解决方案

使用某种方式填充标题在屏幕顶部占用的空间：

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

然后有一个单独的 CSS 样式表来更改height常规viewports 与 mobile viewports。

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

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>
于 2012-04-06T15:18:53.157 回答
0

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

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

于 2012-04-06T15:11:01.330 回答
0

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

于 2012-04-06T15:11:20.623 回答
0

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

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

于 2012-04-06T15:11:41.360 回答
0 
    <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>
于 2012-04-06T17:10:20.757 回答