Footer позиционирование с абсолютным позиционированным содержанием

Я сделал codepen на http://codepen.io/anon/pen/vNVMRE Footer позиционирование с абсолютным позиционированным содержанием

Я знаю, как сделать липкий колонтитул. Однако в моем случае мой контент (.moveDown) должен быть абсолютным, из-за чего нижний колонтитул не вставлен снизу. Вы можете проверить это в кодефене. Если вы уменьшите размер окна до тех пор, пока не увидите полосы прокрутки, нижний колонтитул перемещается по содержимому и остается в новой позиции; Конечно, я мог бы сделать .movedown Див относительно путем изменения кода на линии 40 & 41 до

position: relative; 
top: 0;

Но тогда моя мобильная версия получает проблемы. Я сделал упрощенную версию @http://lettherobots.be/test2/ Как видите, нижний колонтитул работает до тех пор, пока не появится полоса прокрутки.

Если вы масштабируете окно до максимального размера 460, есть вертикальное меню, к которому можно получить доступ через гамбургер. Если я сделаю позицию обертки содержимого (.moveDown) относительно, ссылки в моей вертикальной навигации станут неактивными. Я попытался исправить это с помощью z-index, но это не решило проблему.

Любая идея, как я могу исправить это? Как я могу получить колонтитула в конце моих документов, даже если содержание страницы

Часть кода: Html:

<body> 
<div class="container"> 
    <div class="navContainer"> 
    <nav class="horizontalNav"> 
     .... 
    </nav> 

    <nav class="verticalNav" id="verticalMenu"> 
     ... 
    </nav> 
    </div> 

    <div class="content moveDown clearfix"> 
    <header> 
     <img src="images/headerPic.jpg" alt="Header picture"> 
    </header> 
    <div class="htmlWrapper"> 
     {$importedContent} 
    </div> 
    </div> 

<footer>bla bla</footer> 
</div>

CSS

.moveDown { 
left: 0; 
margin: 0 auto; 
padding: 0; 
position: absolute; 
right: 0; 
top: 60px; 
width: 100%; 
z-index: -2; 
-webkit-transition: top 300ms ease; 
-moz-transition: top 300ms ease; 
-o-transition: top 300ms ease; 
-ms-transition: top 300ms ease; 
transition: top 300ms ease; 
}

источник

2015-11-09 letmebe

Вы не можете придерживаться только положения: абсолютное, потому что абсолютные элементы расположены в соответствии с первым родительским относительным элементом. Вы можете исправить в нижней части некоторого div, но он статичен, поэтому он не может двигаться в соответствии с прокруткой. Существует отличное объяснение в CSS-tricks, где вы можете видеть, что это отличается.

Смотрите этот пример ниже:

html{ 
 
    height: 100%; 
 
    
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
html { 
 
    height: 100%; 
 
} 
 

 
.clearfix::after, 
 
section::after, 
 
header::after, 
 
footer::after { 
 
    clear: both; 
 
    content: " "; 
 
    display: block; 
 
    font-size: 0; 
 
    height: 0; 
 
    visibility: hidden; 
 
} 
 

 
.container { 
 
    min-height: 100%; 
 
    position: relative; 
 
} 
 

 
.navHorizontal { 
 
    height: 60px; 
 
    text-align: right; 
 
    background-color: #eee; 
 
} 
 

 
nav.navHorizontal a { 
 
    display: inline-block; 
 
} 
 

 
.content { 
 
    padding-bottom: 100px; 
 
    position: absolute; 
 
    top:60px; 
 
    width: 100%; 
 
} 
 

 
header img { 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 

 
footer { 
 
    background-color: #ddd; 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 100px; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="navContainer"> 
 
    <nav class="navHorizontal"> 
 
     <section> 
 
     <div class="linkSection"> 
 
      <a href="#">Home</a> 
 
      <a href="#">Portfolio</a> 
 
      <a href="#">Tutorials</a> 
 
      <a href="#">Contact</a> 
 
     </div> 
 
     </section> 
 
    </nav> 
 
    </div> 
 

 
    <div class="content clearfix"> 
 
    <header> 
 
     <img src="http://placehold.it/200x100"> 
 
    </header> 
 
    <div> 
 
     <h1>Some text here</h1> 
 
    </div> 
 
    <div> 
 
     Aliquam hendrerit at est sit amet imperdiet. Etiam nisi eros, sollicitudin ac ligula a, dignissim gravida purus. Mauris non lectus id ex ultricies iaculis nec nec magna. Praesent maximus eleifend sapien. Nunc lobortis ante id leo faucibus ullamcorper. 
 
     Phasellus fringilla posuere urna, ut porttitor nisi. 
 
    </div> 
 
    <div> 
 
     Aliquam hendrerit at est sit amet imperdiet. Etiam nisi eros, sollicitudin ac ligula a, dignissim gravida purus. Mauris non lectus id ex ultricies iaculis nec nec magna. Praesent maximus eleifend sapien. Nunc lobortis ante id leo faucibus ullamcorper. 
 
     Phasellus fringilla posuere urna, ut porttitor nisi. 
 
    </div> 
 
    
 
    
 
    <footer>Footer Content</footer> 
 
    
 
    </div> 
 
    
 
    
 
</div>

источник

2015-11-09 17:51:02

спасибо за ответ. Я знаю, что это невозможно, но подумал, что, может быть, есть еще один способ, о котором я не думал. Другое решение получить тот же результат – letmebe

Footer позиционирование с абсолютным позиционированным содержанием

ответ

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