html - 如何定位将在固定页眉和页脚之间精确显示的锚点？

Question

我想创建一个内容位于固定页眉和页脚下的网站，您可以浏览锚点，只显示活动锚点，其余部分隐藏在页脚和页眉下（如窗口）。我定位了内容、页眉和页脚，但我不知道如何设置锚点，以便单击的锚点的内容将出现在正确的位置，该位置应该在页眉和页脚之间。

希望有人能理解我想要做什么

CSS 和 html 只不想使用 jquery 或 js

---

示例：编辑：http ://cdpn.io/olvhq

Answer 1

你可以用box-sizing属性来做到这一点。

像这样：

小提琴 1 小提琴2

.container
{
    height: 100%;
    background: pink;
    margin: -64px 0;
    padding: 64px 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content {
    overflow:auto;
    height:100%;
}
header
{
    height: 64px;
    background: purple;
    position: relative;
    z-index:1;
}
footer
{
    height: 64px;
    background: gray;
    position: relative;
    z-index:1;
}

Answer 2

我不确定，但请尝试：

#anchor {    
  position:absolute;
  top:50%;
}