Якорные ссылки начинаются под заголовком, который фиксируется вверху

У меня есть страница с фиксированным заголовком вверху, высота 63 пикселей. ниже этого у меня разные разделы страницы (divs), которые по сути являются отдельными страницами. Каждый раздел связан в заголовке как привязывающая ссылка на соответствующий идентификатор div. Проблема, с которой я столкнулась, заключается в том, что при нажатии на ссылку привязки вершина div начинается прямо в верхней части документа, а не под заголовком. Любое решение было бы очень полезно.

КОД КОДА ДЛЯ ГОЛОВЫ:

#headercontainer{
position:fixed;
background-color:#1a1813; 
top:0px;
left:0px;
width:100%;
height:63px;
z-index:1;}

#headercontent{
position:relative;
background-image:no-repeat; 
top:0px;
left:0px;
width:1280px;
margin-left:auto;
margin-right:auto;}

КОД CSS ДЛЯ ПЕРВОЙ СЕКЦИИ (ЧТО ДОЛЖНО БЫТЬ НИЖЕ ГОЛОВЫ, КОГДА АНКЕР НАПИСАЛ:

#landingcontainer{
margin-top:63px;
position:relative;
width:100%;
height:700px;
background-color:#000000;}

#landingcontent{
position:relative;
width:1280px;
height:700px;
margin-left:auto;
margin-right:auto;
background-image:url("../images/landing/landing_bg.png");
background-repeat:no-repeat;

}

HTML ДО ТОЯТЬ ТОЧКИ:

<!-- START BODY CONTAINER -->
<div id="bodycontainer">
    <!-- START HEADER -->
    <div id="headercontainer">
        <!-- START HEADER CONTENT -->
        <div id="headercontent">
            <div id="headerbg">
                <a href="#landingcontainer"><div id="headerlogo"></div></a>
                <div id="headercard"></div>
                <div id="headernavigation">
                    <ul>
                        <a href="#menucontainer"><li>Menu</li></a>
                        <li>Sauces</li>
                        <li>Ranches</li>
                        <li>Order</li>
                        <li>Franchise</li>
                        <li>About</li>
                    </ul>
                </div>
                <div id="headersociallinks"></div>
            </div>
        </div>
        <!-- END HEADER CONTENT -->
    </div>
    <!-- END HEADER -->

    <!-- START LANDING SECTION -->
    <div id="landingcontainer">

Ответ 1

У меня есть еще лучшее решение этой проблемы.

• Во-первых, в css можно создать класс (назовите его, как хотите)

.anchor{
   display:block;
   height:63px; /* this is the height of your header */
   margin-top:-63px; /* this is again negative value of the height of your header */
   visibility:hidden;
}

• В HTML перед началом фактического раздела div, например my #landingcontainer, вы должны добавить тег span с классом якоря (который мы сделали выше) и id того, что вы хотите. для меня я сделал это:

<span class="anchor" id="landing"></span>

Затем фактическая ссылка теперь не будет привязана к вашему фактическому идентификатору div раздела, в который вы хотите их перенести, но, скорее, идентификатор тега span должен быть указан в ссылке.

<a href="#landing">HOME</a>

И У ВАС ЕСТЬ!

то, что мы делаем здесь по существу, - это заставить браузер останавливаться там, где начинается прогон, который точно соответствует высоте заголовка, что делает зрителя не более мудрым;)

Ответ 2

Просто добавьте padding-top: 63px; к элементу, к которому привязана привязка. т.е. гипотетический <div id="sauceslanding"> имел бы CSS #sauceslanding { padding-top: 63px; } со ссылкой на него <a href="#sauceslanding">Sauces</a>.

Протестировано, и это работает для меня. Если это не сработает для вас, создайте jsfiddle или какой-нибудь живой тест, с которым мы можем поиграть, чтобы узнать, есть ли у вас проблема в вашем коде где-нибудь.

UPDATE

Если у вас есть это:

#menucontainer{
    position:relative;
    width:100%;
    height:700px;
    background-color:#1d0f00;
    padding-top:63px;
}
/* END MENU CONTAINER */

/* MENU CONTENT */
#menucontent{
    position:relative;
    width:1280px;
    height:700px;
    margin-left:auto;
    margin-right:auto;
    background-image:url("../images/menu/menu_bg.png");
    background-size:cover; 
    background-repeat:no-repeat;
}

Обновите его до этого:

#menucontainer{
    position:relative;
    width:100%;
    height:700px;
    background-color:#1d0f00;
    padding-top:63px;
    background-image:url("../images/menu/menu_bg.png");
}
/* END MENU CONTAINER */

/* MENU CONTENT */
#menucontent{
    position:relative;
    width:1280px;
    height:700px;
    margin-left:auto;
    margin-right:auto;
    background-size:cover; 
    background-repeat:no-repeat;
}

То, что вы, скорее всего, увидите, это то, что верхняя часть изображения затем обрезается, как будто не было прокладки. То, что вам нужно будет сделать, это изменить фоновое изображение, чтобы иметь еще 63 пикселя мертвого пространства (растяните шаблон забора на север). Тогда вам будет хорошо.

Ответ 3

У меня есть страница с тегами <p class="paragraph" id="#uniqueid">, поэтому на элементах нет предустановленной/прогнозируемой высоты. Решение, которое сработало лучше всего - без ущерба для остальной части установленного CSS/макета - было это от CSS-tricks:

div#container p.paragraph:before {
  content: " "; 
  margin-top: -180px; 
  height: 180px; 
  visibility: hidden; 
}

Больше ничего не нужно.

(FYI для всех, кто думает об использовании этого решения: он работает до тех пор, пока вам не нужно что-либо в затронутом элементе, чтобы его можно было щелкнуть/выбрать, поскольку этот метод кажется бесполезным с фактической экранной позицией вещей. Но отлично подходит для случайного просмотра.)