Нижний колонтитул плавает вверх

У меня есть структура одной страницы следующим образом.
Когда домой или Заказы или О ссылки щелкнули - прокручивает страницу, чтобы показать, что раздел на странице:Нижний колонтитул плавает вверх

<body style="height: 100%;"> 
    ... 
    <header id="home"> 
     <li class="scroll"><a href="#home">Home</a></li> 
     <li class="scroll"><a href="#orders">Orders</a></li> 
     <li class="scroll"><a href="#about">About</a></li>  
    </header> 

    <section id="orders" style="min-height:100%; height:100%; background-color:#FFFFAA;"> 
     ... 
    </section> 

    <section id="about" style="min-height:100%; height:100%; background-color:#FFFFBB;"> 
     ... 
    </section> 

    <footer id="footer" style="position:absolute; bottom:0;width:100%;"> 
     ... 
    </footer> 
</body>

Колонтитула отображается корректно при первой загрузке, когда только заголовок раздела видна. Но когда нажата ссылка «Заказы», нижний колонтитул просто плавает вместе с разделом заголовка, как если бы он был частью раздела заголовка.

источник

2015-07-17 Jasper

дисплей: встроенный блок; –

Пытались ли вы использовать пиксели вместо использования процентов в высоту? –

Зачем голосовать за вопрос «Закрыть»? – Jasper

Я думаю, что вы хотите position: fixed:

html, 
 
body { 
 
    min-height: 100%; 
 
    padding-bottom: 50px; 
 
} 
 
footer { 
 
    background-color: pink; 
 
}

<header id="home"> 
 
    <li class="scroll"><a href="#home">Home</a> 
 

 
    </li> 
 
    <li class="scroll"><a href="#orders">Orders</a> 
 

 
    </li> 
 
    <li class="scroll"><a href="#about">About</a> 
 

 
    </li> 
 
</header> 
 
<section id="orders" style="min-height:500px; background-color:#FFFFAA;"> 
 
    <h2>Orders</h2> 
 

 
</section> 
 
<section id="about" style="min-height:500px; background-color:#FFFFBB;"> 
 
    <h2>About</h2> 
 

 
</section> 
 
<footer id="footer" style="position: fixed; bottom:0;width:100%;"> 
 
    <h2>Footer</h2> 
 
</footer>

источник

2015-07-17 17:59:01 isherwood

isherwood> Perfect. Работает! – Jasper

Нижний колонтитул плавает вверх

ответ

Смежные вопросы