Липкий нижний колонтитул должен очистить содержимое обертки

Я искал в Интернете ответ о липкой нижней колонтитуле и нашел частичный ответ на мой вопрос. Я поместил фиксированную позицию в свою нижнюю оболочку, так что экран браузера изменил размер нижнего колонтитула, который всегда прилипает к основанию. Это отлично работает с большими экранами, но как только экран становится меньше, нижний колонтитул выходит за область содержимого обертки. Пожалуйста, может кто-нибудь сказать мне, как применить этот липкий нижний колонтитул, чтобы он очистил обертку и область содержимого? Смотрите следующий кодЛипкий нижний колонтитул должен очистить содержимое обертки

HTML КОД:

<html> 
<body> 
<div id="master-wrapper">  
<div class="wrapper"> 

<div class="main-content clearfix"> 

<div class="can-wrapper"> 
<div class="can-img"></div><!-- end .can-img --> 
</div><!-- end .can-wrapper --> 

</div><!-- end .main-content --> 


</div><!-- end .wrapper --> 
<div class="footer-wrapper"> 
<footer> 
</footer> 
</div><!-- end .footer-wrapper --> 

</div><!-- end #master-wrapper --> 
</body> 
</html>

КОД CSS:

html {height:100%;} 

body { 
margin:0px; 
padding:0px; 
top:0; 
width:100%; 
height:auto; 
min-height: 100%; 
min-width: 100%; 
    } 

#master-wrapper {overflow: hidden; position: relative; width: 100%; height:100%; min-height:100% } 
.wrapper {margin:196px auto -4em; position: relative; width: 950px; padding:0px 20px 156px; min-height:100%; z-index:1;} 

.footer-wrapper {position:fixed; margin-top:-139px; clear:both; bottom:0; width:100%; height:139px; background:#C0A18F;} 
footer {margin:50px auto; width:950px; padding:0px;}

Что мне нужно для колонтитула, чтобы начать придерживаться после того, как о 800px (H) почти 800px в недостаточной мере верхнее значение.

Я ВЕЛИКОЕ ПРИНИМАЮ ЛЮБОЕ ПОМОЩЬ С ЭТИМ !!

источник

2013-09-16 Alice

Там Похожая тема с рабочим кодом Sticky Footer: http://stackoverflow.com/questions/1112082/problem-with -css-sticky-footer-implementation # 1112136% 22Sticky% 20Footer% 22 – GroundZero

Вы также можете проверить этот сайт: http://www.cssstickyfooter.com/ – GroundZero

HTML

<div id="wrapper"> 
     <p>lots of content</p> 
    </div> 
    <div class="stickyFooter"> 
     <p>Content for sticky footer</p> 
    </div>

CSS

.stickyFooter { 
    position: fixed; 
    bottom: 0px; 
    width: 100%; 
    overflow: visible; 
    z-index: 99; 
    padding-top: 5px; 
    padding-bottom: 3px; 
    background: white; 
    border-top: solid white 2px; 
    background-color: #89D4DF; 
    -webkit-box-shadow: 0px -5px 15px 0px #bfbfbf; 
    box-shadow: 0px -5px 15px 0px #bfbfbf; 
    height: 34px; 
}

источник

2013-09-16 14:05:14 Arun

Липкий нижний колонтитул должен очистить содержимое обертки

ответ

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