Я пытаюсь прикрепить нижний колонтитул к нижней части страницы в CSS - PullRequest
Новая
       45

Я пытаюсь прикрепить нижний колонтитул к нижней части страницы в CSS

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

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

HTML-код 

<div class="container">
    <div class="row">
        <div id="logo" class="two columns">
            <a href="http://anderskitson.ca/mrskitson2012"><img src="http://anderskitson.ca/mrskitson2012/wp-content/themes/mrskitson2012/images/logo.png" alt="Mrs Kitson's Kinderegarten"/></a>
        </div>
        <div id="title" class="ten columns">
        <p><span>Mr's</span> Kitson's Kindergarten</p>
        </div>
    </div>
    <div class="row">
        <div class="ten columns">
            <div class="mainNav"><ul><li class="page_item page-item-19"><a href="http://anderskitson.ca/mrskitson2012/blog/">blog</a></li><li class="page_item page-item-17"><a href="http://anderskitson.ca/mrskitson2012/calendar/">calendar</a></li><li class="page_item page-item-9"><a href="http://anderskitson.ca/mrskitson2012/curriculum/">curriculum</a></li><li class="page_item page-item-15"><a href="http://anderskitson.ca/mrskitson2012/forms/">forms</a></li><li class="page_item page-item-2 current_page_item"><a href="http://anderskitson.ca/mrskitson2012/">home</a></li><li class="page_item page-item-13"><a href="http://anderskitson.ca/mrskitson2012/news/">news</a></li><li class="page_item page-item-11"><a href="http://anderskitson.ca/mrskitson2012/resources/">resources</a></li><li class="page_item page-item-21"><a href="http://anderskitson.ca/mrskitson2012/video/">video</a></li><li class="page_item page-item-7"><a href="http://anderskitson.ca/mrskitson2012/visible/">visible</a></li></ul></div>
        </div>
    </div>
    <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 id="footer" ></div>
<!-- container ends-->
</div>

код CSS 

#footer{ background-image: url('../images/footer.jpg'); height:300px; width:100%; position: absolute; bottom:0;}

Ответы [ 3 ]

4 голосов
/ 19 марта 2012
0 голосов
/ 19 декабря 2012

Вы используете фундамент, который меняет дно: 0 абсолютное позиционирование.Доказательство: попробуйте избавиться от основного вызова css в заголовке, и вы увидите, как все настраивается.

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

Вам просто нужно добавить 

html { height:100%; }

оно у вас есть на теле, но не в теге html.

...