У меня фиксированная высота заголовка 50px. В моем теле у меня много якорей. Проблема в том, что когда я нажимаю ссылки, указывающие на привязки, ящик появляется под моим фиксированным заголовком, и я теряю 50 пикселей содержимого (мне нужно прокручивать 50 пикселей для чтения содержимого под заголовком).
Есть ли способ поместить якорь в 50 пикселей? Мое тело заполнено большим количеством ящиков (div) с разницей между ними, поэтому я не могу установить пустой div из 50px, а затем закрепить после него.
HTML:
<div id="header"></div>
<div id="content">
<div class="box" id="n1"></div>
<div class="box" id="n2"></div>
<div class="box" id="n3"></div>
</div>
CSS
#header{
height: 40px;
width: 100%;
margin: 0px;
padding: 0px;
position: fixed;
text-align: center;
z-index:2;
}
#content{
padding-top: 50px;
margin: 0px;
}
.box {
width: 80%;
margin-left: auto;
margin-right: auto;
vertical-align : top;
padding: 1.4%; /* Keep it in percent (%) */
margin-bottom: 30px;
min-height: 200px;
}