Я пытаюсь заставить работать CSS липкий колонтитул - PullRequest
Новая
       7

Я пытаюсь заставить работать CSS липкий колонтитул

1 голос
/ 19 марта 2012

Я попытался добавить липкий нижний колонтитул css на мою страницу, но, похоже, он не работает. нижний колонтитул находится ниже содержимого, но не придерживается нижней части страницы. http://www.cssstickyfooter.com/

Вы можете посмотреть сайт, который я пытаюсь реализовать вживую, по адресу www.anderskitson.ca/mrskitson2012

.

Вот мой HTML-код, некоторые для простоты 

<div class="container">
    <div id="main" class="row">
     <div class=" twelve columns ">
      <div class="row">
       <div class="11 columns offset-by-one">
        <img src="http://anderskitson.ca/mrskitson2012/wp-content/themes/mrskitson2012/images/kidsDrawings.jpg" alt="Kids Drawings"/>
      </div>
     </div>
    </div>
   </div>
<!-- container ends-->
</div>
<div id="footer" ></div>

Вот мои css декларации 

.container{position:relative; min-height:100%; }
#main{ overflow:auto; padding-bottom: 300px; }
#footer{ background-image: url('../images/footer.jpg'); height:300px; width:100%; position: relative; margin-top: -300px; clear:both;}

Ответы [ 4 ]

2 голосов
/ 19 марта 2012

Обновите CSS в строке 45 foundation.css 

html {
    font-size: 62.5%;
    height:100%
}

См. Снимок экрана по этой ссылке: http://img854.imageshack.us/img854/9064/footerpos.jpg

0 голосов
/ 19 марта 2012

Я добавил postion:fixed;display:block;min-width:100%;bottom:0;, и это сработало нормально. Если вы собираетесь это делать, я бы также сделал прозрачным верхнюю часть вашего footer.gif. Или попробуйте файл .png с прозрачностью.

0 голосов
/ 19 марта 2012

Попробуйте этот HTML-код: 

<body>
        <div class="container">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">  
       </div>
</body>

Код CSS: 

html, body {
height: 100%;
}     

.container {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
        }
        .footer, .push {
            height: 142px; /* .push must be the same height as .footer */
        }
0 голосов
/ 19 марта 2012

Попробуйте bottom:0;min-width:100%; как часть вашего CSS

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...