Question

我有一个固定的标头position:fixed为什么它会停留在其他元素之上并隐藏它们，因此我必须将padding添加到main.因为{{1}的高度}因媒体查询设置的内容，字体大小和填充而异，因此无法像在代码段中那样使用header的固定值。有没有一个解决方案可以在不使用javascript的情况下尊重更改padding的高度？

header

body {
  margin: 0;
  padding: 0;
}

header {
  background-color: grey;
  position: fixed;
  width: 100%;
}

main {
  padding-top: 80px; /* bad, because it's fixed */
}

Answer 1

如果你想保持固定的位置，你无法在不使用Javascript的情况下实现它。我建议不要使用位置，而是尊重html层次结构。一旦滚动将其从视口中移出，就使其“固定”。如果您希望在高度变化的情况下始终可见标题，这是最典型的方法。

Answer 2

正如其他人所说，如果没有javascript，你就无法做到，但你可以在主要内容区域使用flexbox和flex-grow: 1; overflow-y: scroll;伪造一个固定的标题。

* {margin:0;}
body {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
}
section {
  flex-grow: 1;
  overflow-y: scroll;
}
main {
  background: #eee;
  min-height: 500vh;
}

<header>
  <h1>Example</h1>
</header>
<section>
  <main>
    <p>Content</p>
  </main>
</section>
<footer>
  <p>footer</p>
</footer>

CSS位置：固定标题

2 个答案: