Question

目标： 模拟此StackOverflow页面的固定标头和可滚动内容：

内容下的页脚随着内容上卷而向上滚动。
向下翻页（通过键盘）时，标题不会剪切任何内容。即，内容不能放在标题后面。
锚点不要放在标题后面。
没有双滚动条。
如果我增加页眉的高度（例如，悬停时），则页面内容不会被进一步压低（即，较高的页眉仅覆盖了更多内容）。
#header，#content和#footer div是兄弟姐妹

<div id="header">This is the header.</div>

<div id='content'>This is the content.</div>

<div id='footer'>This is the footer.</div>

要应用的网站网址：https://gunretort.xyz/index.php/Portal:Tag?Tag=CommonGround

身体填充失败： 常见的建议是body{padding-top:...}，以降低#content。但这并不能真正将内容压低-内容仍会滚动到标题的后面，因此当您向下翻页时，内容的顶部会被标题剪切。锚点落在页眉的后面，看不到它们。

标题后面的内容示例：

在此示例中，单击“转到锚点”以查看问题。 https://codepen.io/johnyradio/pen/pKxBwQ

StackOverflow： StackOverflow做对了。页脚根据需要向上滚动内容。 #content和#footer是同胞。我在此页面的CSS中看到以下内容，但我不知道这是否是魔术。

#content {
    max-width: 1100px;
    width: calc(100% - 164px);
    background-color: #FFF;
    padding: 24px;
    box-sizing: border-box;
}

div {
    display: block;
}

#content:before, #content:after {
    content: "";
    display: table;
}

body *, body *:before, body *:after {
    box-sizing: inherit;
}

#content:after {
    clear: both;
}

Flex： 我还在此SO页面的.css文件中看到很多Flex。下面的答案中使用了Flex。这些答案有问题-它们破坏了#footer。

网格： 网格似乎是应该的方式。但是我担心浏览器的兼容性。另外，到目前为止，我还没有找到网格解决方案。

溢出： 此方法使用固定位置将#content放置在标题下方，且没有重叠。使用overflow:auto将其设置为固定大小的框将使#content div具有其自己的滚动条。我们可以将#footer位置固定在#content下方，但是缺点是页脚不会向上滚动-它必须在视口底部占据永久性房地产。

https://codepen.io/johnyradio/pen/aKReor

+填充-边距： 一些解决方案涉及填充和边距。对于来自同一页面或不同页面的跨度锚，a链接，这种方法不能始终如一地工作。在未知目标编号的情况下使用:target并非在所有情况下都有效。此外，它也无法解决正确的向下翻页问题。另外，将样式应用于主要div似乎比将每个链接目标都更有效。任何需要id或类名知识的解决方案都不会起作用，因为我们将不具备该知识；此外，涵盖所有当前和将来情况的强大CSS解决方案也不需要此类知识。

a[name] {
  padding-top: 40px;
  margin-top: -40px;
  display: inline-block;
}

https://css-tricks.com/hash-tag-links-padding/

框架： 我认为框架可能是一个选择，但是存在无法更改HTML的问题。

不是重复的：这个问题不是此处其他主题的重复。我在SO上看到的解决方案无法处理未知的链接目标，无法正确页面和滚动页脚（如此页面）。例如，

Body top gap; should I use margin or padding?

Answer 1

对要滚动的内容使用overflow-x: auto。

在这种情况下，<main />块具有自己的滚动条。内容不会放在header元素后面。

body {
  margin: 0;
  background-color: red;
  flex-direction: column;
  display: flex;
  height: 100vh;
}

header {
  opacity: .3;
  background-color: yellow;
  height: 50px;
}

main {
  overflow-x: auto;
  flex: 1;
}

<body>
  <header>Header is semi-opaque</header>
  <main>
    <p><a href='#myAnchor'>Go to anchor</a> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
    <p><a href='#myAnchor'>Go to anchor</a> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et earebum.
    <p><span style='color:yellow' id=myAnchor>ANCHOR</span>  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
    <p> rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
  </main>
</body>

Answer 2

给您的内容容器一个固定的position，并相应地设置其top和height。最后，使用overflow: auto使其可滚动。

简而言之，只需将您的#content样式替换为：

#content{
  position: fixed;
  top: 50px;
  height: calc(100vh - 50px);
  overflow: auto;
  flex: 1;
}

编辑：

Here's到带有有效解决方案的笔叉的链接。

Answer 3

这是一个使锚看起来更大的技巧，因此单击链接将不会覆盖实际的锚文本。由于您的边距为负，因此锚元素将不会占用更多空间。但它的滚动位置会高出50px。

:target {
  padding-top: 50px; 
  margin-top: -50px
}

这使用:target伪类。

:target CSS伪类代表一个唯一元素（目标元素），其ID与网址的片段匹配。

示例：https://codepen.io/haakenlid/pen/oyarva

CSS要在固定标题下制作垂直滚动区域？

3 个答案: