Как я могу разместить якорь, который будет отображаться точно между фиксированным заголовком и нижним колонтитулом?

Question

Я хочу создать сайт, на котором содержимое находится под фиксированным верхним и нижним колонтитулом, и вы можете перемещаться по якорям, показывается только активный якорь, остальные скрыты под нижним колонтитулом и заголовком (например, окно). Я позиционировал содержимое, заголовок и нижний колонтитул , но я не знаю, как установить привязки, чтобы содержимое щелкнутого якоря появлялось в нужном месте, которое должно быть точным между заголовком и нижним колонтитулом.

надежда кто-то может понять, что я хочу сделать

CSS и HTML только не хотите использовать JQuery или JS

---

пример: редактировать: http://cdpn.io/olvhq

Answer 1

Я м Не уверен, но попробовал:

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

Answer 2

Вы можете сделать это с помощью box-sizing.

Как так:

FIDDLE1FIDDLE2

.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; 
}