【发布时间】：2018-12-06 19:41:14
【问题描述】：
目标： 模拟 此 StackOverflow 页面的固定标题和可滚动内容：
- 随着内容向上滚动，内容下方的页脚会向上滚动。
- 向下翻页（通过键盘）时，页眉不会截断任何内容。即，内容不能放在标题后面。
- 锚点不在标题后面。
- 没有双滚动条。
- 如果我增加标题的高度（例如在悬停时），页面内容不会被进一步向下推（即，较高的标题只会覆盖更多的内容）。
-
#header、#content和#footerdiv 是兄弟姐妹
<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 做得对。根据需要，页脚随内容向上滚动。 #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;
}
弹性：
我还在这个 SO 页面的 .css 文件中看到了很多 Flex。下面的答案中使用了 Flex。这些答案有问题——他们打破了#footer。
网格： 网格似乎应该就是这样。但我担心浏览器的兼容性。另外，到目前为止，我还没有找到网格解决方案。
溢出：
这种方法使用固定位置将#content 放置在标题下方，没有重叠。使用overflow:auto 使其成为一个固定大小的框，为#content div 提供了它自己的滚动条。我们可以修复#content 下面的#footer 位置，但缺点是页脚不会向上滚动——它必须占据视口底部的永久不动产。
https://codepen.io/johnyradio/pen/aKReor
+边距-边距：
一些解决方案涉及填充和边距。对于来自同一页面或不同页面的跨度锚、a 链接，这并不能始终如一地工作。在不知道目标 ID 时使用 :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 上看到的解决方案不能处理未知的链接目标、正确的页面和滚动页脚（如本页）。例如，
【问题讨论】：
标签： css