Липкий нижний колонтитул сводит меня с ума - пожалуйста, помогите? - PullRequest
Новая
       11

Липкий нижний колонтитул сводит меня с ума - пожалуйста, помогите?

0 голосов
/ 08 октября 2009

Я смотрел на это в течение нескольких дней, и я искал и искал, может быть, я просто не могу видеть лес за деревьями, но если бы кто-нибудь мог пролить некоторую проницательность, я был бы очень благодарен.

Хорошо, у меня есть этот липкий нижний колонтитул, который находится в верхней части страницы и прокручивает страницу вниз, панель всегда находится в нижней части экрана.

Он отлично работает на моем ПК, но я не вижу его на других компьютерах, которые я тестирую. Точно такая же настройка, пути к изображениям есть. Я просто не могу понять, я чувствую себя так, словно собираюсь на банан!

HTML-код: 

<body id="home">
    <div class="wrap">
    <!-- Header -->
    <div id="header">
    </div>         
    <div id="slideshow-container"> 
        <div id="slideshow"></div>
        </div>
        <!-- // Header -->
        <div id="main" class="clearfix">      
    <!-- Content -->
    <div id="content">
  </div>
    <!-- // Content -->     
    <!-- Sidebar -->
    <div id="sidebar">                
    </div>            
    <!-- // sidebar -->         
    </div>
<!-- // Wrap end -->            
    <div id="footer" class="clearfix">
        <div class="wrap">
            <div class="clearfix">
                        </div>

        </div>
    </div>

Хорошо, вы просто не можете видеть изображения ... что происходит - я чувствую себя таким отсталым !!

CSS: 

body{
    background: url(../images/bg_body.png) center 0 #ffffff repeat-x;
    font-size: 62.5%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #666666;
    padding: 0 0 50px 0;    
    height: 100%;

#footer{
    background: url(../images/bg_footer.gif) center 0 repeat-x;
    position: relative;
    bottom: 0;
    width: 100%;    
    left: 0;
    right: 0;
    z-index: 1000;
}

#footer .wrap{  
    background: url(../images/bg_footer_wrap.png) center 0 no-repeat;
    padding: 7px 0 0 0;
    height: 70px;

}

Ответы [ 3 ]

3 голосов
/ 08 октября 2009

Внимательно посмотрите на CssStickyFooter.com и сравните его с вашим кодом.

Сразу видно, что ваш HTML не работает (тело и перенос никогда не закрываются) и что .clearfix (не определено в опубликованном CSS, кстати) применяется повсеместно.

1 голос
/ 30 января 2013

Сегодня нашли отличное решение для нижнего колонтитула. Надеюсь, это поможет, кажется, самое простое решение для меня: 

<style type="text/css">
   html,body {
      height:100%
   }

   #wrapper {
      min-height:100%;
      margin-bottom:-150px; /* negative total computed height of footer */
   }

   #footer_padding {
      height:150px; /* total computed height of footer */
   }

   #footer {
      height:100px;
      margin-top:50px;
   }
</style>    


<div id="wrapper">

   <div>some content...</div>

   <div id="footer_padding"></div>

</div>

<div id="footer"></div>
0 голосов
/ 20 января 2013

В этом репозитории github вы найдете ( липкий нижний колонтитул Bredele css ) двух версий липких нижних колонтитулов: один с заголовком, а другой без.

В обеих этих версиях используется display: table (работает с IE8 и IE6 / 7 с поли заливкой) без дополнительных наценок, без clearfix (вместо CssStickyFooter) и гибкая высота содержимого.

Надеюсь, это будет полезно!

Olivier

...