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

时间:2012-04-06 15:08:24

标签: html css css-position

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

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

例如,如果你使用float,你可以使用clear:both来重置位置,是否还有可能位置:fixed?

6 个答案:

答案 0 :(得分:3)

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

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

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

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

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

答案 1 :(得分:1)

仅CSS解决方案

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

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

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

(或者请参阅下面的JavaScript解决方案,动态设置viewport属性。)

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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

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

答案 5 :(得分: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>