Проблемы с липким нижним колонтитулом

Я пробовал различные техники для применения техники Sticky Footer Райана Файта, и ни один из них не работает. Содержание нижнего колонтитула всегда перекрывает мое основное содержимое, когда браузер вертикально оспаривается. Это может быть потому, что у меня есть много фиксированных DIV, расположенных в нижнем колонтитуле. Когда я обертываю эти DIV вокруг родительского DIV (#footer), этот родительский DIV, кажется, даже не появляется, и я не могу применить к нему стили для управления своей позицией (и содержимым внутри).Проблемы с липким нижним колонтитулом

HTML:

<body> 
<div class="wrapper"> 
<div id="content"> Juicy stuff goes here</div> 
<div class="push"></div> 
<div class="footer"> 

    <div id="print_blank"></div> 
    <div id="logo"></div> 
    <div id="nav_bar"></div> 
    <div id="footerarea">Contains other Text</div> 

</div><!-- Footer Area --> 
</body>

CSS:

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -240px; 
} 
.footer, .push { 
    height: 240px; 
} 
#print_blank { 
    padding-top: 0px; 
    bottom: 160px; 
    position: fixed; 
    z-index: 11000; 
    width: 100% !important; 
    text-align: center; 
    min-width: 980px; 
} 
#logo { 
    width: 180px; 
    padding-top: 5px; 
    bottom: 86px; 
    position: fixed; 
    z-index: 9999999; 
    left: 45px; 
} 
#nav_bar { 
    padding-top: 0px; 
    bottom: 77px; 
    position: fixed; 
    z-index: 99999; 
    width: 100% !important; 
    text-align: center; 
    min-width: 980px; 
} 
#footerarea { 
    bottom: 0px; 
    position: fixed; 
    width: 100%; 
    padding-top: 20px; 
    background-color: #F16924; 
    height: auto; 
    text-align: justify; 
    min-width: 960px; 
    z-index: 999999; 
}

Спасибо!

источник

2013-05-07 MacGyver_97

Это лучший способ сделать это:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
html, body {height: 100%; margin: 0; padding: 0;} 

* html #outer {/* ie6 and under only*/ 
    height:100%; 
} 

.wrapper { 
    min-height: 100%; 
    margin: -240px auto 0; 
} 

.content {padding-top: 240px;} 

.footer { 
    height: 240px; background: #F16924; 
} 

</style> 

</head> 
<body> 

<div class="wrapper"> 
    <div class="content">Juicy stuff goes here</div> 
    <div class="push"></div> 
<!-- end wrapper --></div> 
<div class="footer"></div> 

</body> 
</html>

Ограничение липких колонтитулы является то, что сноска должна оставаться на фиксированной высоте. Но элементы, которые у вас есть, не должны влиять на макет, если вы будете осторожны.

EDIT: Вот пересмотренный шаблон с элементами колонтитула включен:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
html, body {height: 100%; margin: 0; padding: 0;} 

* html #outer {/* ie6 and under only*/ 
    height:100%; 
} 

.wrapper { 
    min-height: 100%; 
    margin: -240px auto 0; 
} 

.content {padding-top: 240px;} 

.footer { 
    height: 240px; background: #F16924; position: relative; 
} 

#print_blank { 
    padding-top: 0px; 
    bottom: 160px; 
    position: absolute;; 
    z-index: 11000; 
    width: 100% !important; 
    text-align: center; 
    min-width: 980px; 
} 
#logo { 
    width: 180px; 
    padding-top: 5px; 
    bottom: 86px; 
    position: absolute;; 
    z-index: 9999999; 
    left: 45px; 
} 
#nav_bar { 
    padding-top: 0px; 
    bottom: 77px; 
    position: absolute;; 
    z-index: 99999; 
    width: 100% !important; 
    text-align: center; 
    min-width: 980px; 
} 
#footerarea { 
    bottom: 0px; 
    position: absolute; 
    width: 100%; 
    padding-top: 20px; 
    background-color: #F16924; 
    height: auto; 
    text-align: justify; 
    min-width: 960px; 
    z-index: 999999; 
} 

</style> 

</head> 
<body> 

<div class="wrapper"> 
    <div class="content">Juicy stuff goes here</div> 
    <div class="push"></div> 
<!-- end wrapper --></div> 
<div class="footer"> 
    <div id="print_blank"></div> 
    <div id="logo"></div> 
    <div id="nav_bar"></div> 
    <div id="footerarea">Contains other Text</div> 

</div> 

</body> 
</html>

источник

2013-05-07 01:04:30

Спасибо, но проблема, кажется, не быть с липкостью сноски. Скорее, родительский DIV нижнего колонтитула (#footer) не активно содержит все под-DIVS, (#print_blank, #logo, #nav_bar, #footerarea). Не могли бы вы диагностировать CSS, чтобы понять, что не так? –

У вас будут проблемы с липким нижним колонтитулом, если вы не используете этот шаблон, который я предоставил. Но что касается того, чтобы содержимое нижнего колонтитула оставалось внутри него, вам нужно предоставить '' нижний колонтитул 'position: relative', чтобы дать внутренним элементам контекст позиционирования. Не используйте «position: fixed» на внутренних элементах нижнего колонтитула, хотя они не будут перемещаться с нижним колонтитулом. Либо поплавайте, либо дайте им «display: inline-block» или дайте им «position: absolute» (если вам нужно, хотя я предпочитаю избегать этого). –

Я ценю вашу помощь, но это действительно просто не работает для меня. Я думаю, что мой CSS просто испорчен на всех различных DIVS, которые у меня есть. –

Проблемы с липким нижним колонтитулом

ответ

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