Question

这是我的html5标记

<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>

现在使用css

header{ height: 95px;position: fixed;width: 100%;min-width: 980px;}
footer{background:#000000;bottom:0;height:30px;position:fixed;width:100%;min-width: 980px}

现在我的问题是我把任何内容放在

中

<div id="content">
</div>

内容来自顶部：0不是必需的。我不想在内容上使用填充或边距。是否有任何方式来自标题下面的内容。

Answer 1

主要原因是因为<header>是position:fixed将其从文档流中取出。您需要将margin或padding添加到<body>或<content>（??）元素中。此外，如果使用HTML5元素，请将其添加到CSS规则的顶部，以便与旧版浏览器兼容。

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

取自Eric Meyer's CSS Reset。

Answer 2

关注那些存在的HTML5标记。如果您要创建自己的，那么可能会有后果。

此处遵循此。

<header>
</header>
<section>
</section>
<footer>
</footer>

要了解有效的HTML5代码，请遵循此link。

Answer 3

您没有提及任何其他布局要求，但这将是一个良好的开端

content {position: relative; top: 95px}

<强>更新

正如其他好人所说，<content>不是有效的HTML5标记。也许它与具体问题没有关系，但请遵循他们的建议并避免滚动自己的标签。改为使用标准的。

Answer 4

我假设您实际上并不是<content>，因为它不是有效的HTML5标记。无论如何，您看到的问题归结为position: fixed元素的<header>指令。尝试删除它并从那里开始。

Answer 5

如果其他解决方案不起作用，请检查您的背景/背景颜色是否透明，并将其设置为白色。

Answer 6

因此，对于我从这个问题中获得的内容，您试图不重叠内容，您可以在 div 的css中使用z-index：

.example {

    position: absolute;

    z-index: -10;

}

z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）

Answer 7

我最近正在研究这个主题，这是我通过检查Dropbox's job website找到的实现。

他们在固定div之后使用虚拟header，并将此div的高度设置为与header相同。

我个人更喜欢以下解决方案：

在不同设备上使虚拟div的高度与header一致更容易。
我可以对content部分进行布局，就好像固定头不存在一样，这对我来说更有意义。

这是一个演示：

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

header {
  position: fixed;
  width: 100%;
  height: 150px;
  background-color: aliceblue;
  opacity: 0.7;
}

section {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.header-dummy {
  height: 150px; /* this height SHOULD always be at least the same as header's */
  background-color: chartreuse;
}

#content {
  background-color: orange;
}

footer {
  background-color: dodgerblue;
}

<header>
  <section>
    <div>
      <span>HEADER TEXT</span>
    </div>
  </section>
</header>
<div class="header-dummy"></div>
<div id="content">
  <h3>Content are not Impacted</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h3>Content are not Impacted</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h3>Content are not Impacted</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h3>Content are not Impacted</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h3>Content are not Impacted</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h3>Content are not Impacted</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h3>Content are not Impacted</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h3>Content are not Impacted</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<footer>
  <span>I'm just a footer</span>
</footer>

Answer 8

我尝试了许多不起作用的方法。终于找到了。

.fixed-header{
     position: fixed;
     z-index: +1;        // Header comes front
}

定位固定内容重叠问题

8 个答案: