CSS Sticky Footer - мне никогда не подходит - PullRequest
Новая
       13

CSS Sticky Footer - мне никогда не подходит

2 голосов
/ 20 сентября 2011

Я пытался заставить это работать некоторое время, и, кажется, никогда не получалось.Я думаю, потому что моя структура HTML немного отличается от той, что в примере.Моя проблема заключается в том, что на страницах, которые меньше, чем область просмотра, нижний колонтитул автоматически не перемещается вниз, а div #main не распространяется на нижний колонтитул.

Вот мой HTML-код: 

<html>
    <body>
        <div id='container'>
            <div id='main'>
                <div id='content'> </div>
            </div>
            <div id='footer'> </div>
        </div>
     </body>
</html>

А вот мой основной CSS, без реализации CSS Sticky Footer: 

div#container {
    width:960px;
    margin:0 auto;
}
div#main {
    background-color:black
    padding-bottom:30px;
}

div#content {
    width:425px;
}

div#footer {
    position:relative;
    bottom:0;
    width:inherit;
    height:90px;
}

Для пояснения: допустим, фон div # main черный.Допустим, на странице есть только 1 строка текста в div # main.Поэтому я хочу, чтобы область #main расширялась вплоть до нижнего колонтитула (который находится внизу страницы), даже если не хватает содержимого, чтобы это произошло.имеет смысл?

И еще одна вещь.Область #main имеет цвет фона, отличный от основного.Так что фон #main должен простираться до самого нижнего колонтитула, потому что если есть пробел, цвет тела вместо этого достигает максимума

Ответы [ 5 ]

1 голос
/ 20 сентября 2011

Попробуйте сделать нижний колонтитул position:fixed.

http://jsfiddle.net/QwJyp/

Обновление

Я немного ближе: http://jsfiddle.net/QwJyp/1/. Возможно, кто-то может построить это. Если вы удалите строку с определенным !important, это позволит отображать основной с height:100%. Но есть еще много дополнительных отступов в нижней части div, которые я не могу понять. Я продолжу позже, когда у меня будет больше времени. Удачи! Надеюсь, это поможет с некоторым направлением.

0 голосов
/ 21 сентября 2011

Я знаю, что html структурирован не так, как вы работаете, но, возможно, вы можете изменить структуру ядра, чтобы имитировать это (потому что это работает): CSS Sticky Footer

Похоже, что эта группа провела много исследований по этой теме и нашла, что это лучший (может быть единственный?) Способ ... через множество различных версий.

0 голосов
/ 21 сентября 2011

Попробуйте использовать абсолютную позицию для нижнего колонтитула div 

<div id='container'>
            <div id='main'>
                <div id='content'> </div>
            </div>
            <div id='footer'> </div>
        </div>

Убедитесь, что рост составляет 100% 

html,body
{   height:100%;
    padding:0;
    margin:0;
}
div#container {
    width:960px;
    margin:0 auto;
    position:relative;
    height:100%;
}
div#main {
    background-color:black;
    padding-bottom:90px;
}

div#content {
    width:425px;
}

div#footer {
    position:absolute;
    bottom:0;
    width:inherit;
    height:90px;
    width:960px;
}
0 голосов
/ 20 сентября 2011

Вот, пожалуйста, http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

EDIT

Используя технику из статьи выше (проверено - и работает в скрипке):

HTML 

<html>
    <head>
    </head>
    <body>
    <div id='container'>
        <div id='main'>
            <div id='content'>Hello</div>
        </div>
        <div id='footer'> </div>
    </div>
    </body>
</html>

CSS 

html, body {
    margin: 0; padding: 0; height: 100%;
}
div#container,div#main {
    background-color: #333;
}
div#container {
    min-height:100%; width:960px; margin:0 auto; position:relative;
}
div#main {
    padding-bottom:90px; margin:0; padding:10px;
        }
div#content {
    width:425px;
}
div#footer {
    position:absolute; bottom:0; width: 100%; height:90px; background-color: #ADF;
}
0 голосов
/ 20 сентября 2011

Идея состоит в том, чтобы иметь #main с отступом-дном x, минимальную высоту контейнера: 100%, нижний колонтитул после контейнера и с полем-top -x

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

Похожие темы

...