Нижний колонтитул не придерживается дна, хотя у меня есть это закодировано - PullRequest
Новая
       18

Нижний колонтитул не придерживается дна, хотя у меня есть это закодировано

2 голосов
/ 04 января 2009

Я удалил нижний колонтитул, сайт должен был выйти в сеть. Так что ссылка исчезла.

Как вы можете видеть (как в FF2, так и в IE7) нижний колонтитул находится внизу экрана, но не внизу страницы (содержимое).

У меня есть это в моем коде: 

<div id="wrap">
    <div id="top"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

и это в css: 

html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;  /* height of the footer */
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    min-height: 100%;
    position: relative; 
}
*#wrap {            /* IE hack */
height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    padding: 0;
    margin: 0;
}

Или, говоря коротко: я следовал инструкциям здесь .

Ответы [ 8 ]

4 голосов
/ 04 января 2009

Вы недостаточно тщательно следовали инструкциям. Ключ к макет Мэтью 

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

означает, что контейнер имеет положение: относительное, тогда как нижний колонтитул имеет положение: абсолютное. Это помещает одно в другое. Обратите внимание, что в контейнере есть место, зарезервированное для нижнего колонтитула, резервируя padding-bottom размером нижнего колонтитула. Таким образом, макет работает только при фиксированной высоте нижнего колонтитула.

Абсолютно позиционированный с нижним: элемент 0 будет располагаться внизу ближайшего относительно позиционированного родителя. Если их там нет, вместо этого используется область просмотра, и именно это происходит в вашем макете.

Ваш div нижнего колонтитула не является потомком вашего div.

3 голосов
/ 04 января 2009

Как насчет этого ?

1 голос
/ 05 января 2009

Правильно, так что с #size внутри 100%, снимите отступ с переноса и добавьте следующее к # content 

overflow:auto;
padding-bottom:30px;

тогда ваша ссылка у меня работает в FF

1 голос
/ 04 января 2009

Переместите отступ от нижней части тела к нижней части #wrap. Ваш нижний колонтитул всегда находится в 30 пикселях от нижней части «страницы» из-за этого отступа. Поместив его в #wrap, вы предотвратите попадание содержимого #wrap за нижний колонтитул.

0 голосов
/ 06 января 2009

На этом сайте есть довольно хорошая техника с демо: http://www.themaninblue.com/experiment/footerStickAlt/

0 голосов
/ 04 января 2009

Должно быть что-то еще в этом вопросе, каждый описанный выше метод работает на разных сайтах, но не на моем.

Это источник моей страницы, несущественные вещи удалены (контент и прочее): 

<body>
    <div id="size"> javascript textsize modifier</div>
    <div id="wrap">

        <div id="top"> logoimage
            <div id="menu">
                <div id="menuwrapper">
                    <ul id="primary-nav">
                        <li> Homelink </li>
                        <li class="menuactive menuparent" class="over"> Link 2
                            <ul>
                                <li> Sublink 1 </li>
                                <!-- etcetera //-->
                            </ul>
                        </li>
                        <li class="menuparent" class="over"> Active Link 3
                            <ul>
                                <li> Sublink 1</li>
                                <!-- etcetera //-->
                            </ul>
                        </li>
                    </ul>
                </div> <!-- end menuwrapper //-->
            </div> <!-- end menu //-->
        </div> <!-- end top //-->

        <div id="content">
            <div id="newssnippet"></div>
            <div id="roundedright"> <!-- rounded corners //-->
                <!-- 6 divs to create rounded corners //-->
                <div id="right">Random main content</div>
                <!-- 7 divs to create rounded corners //-->
            </div> <!-- end rounded corners //-->

            <div id="logo">Another logo</div>

            <div id="roundedleft"> <!-- rounded corners again //-->
                <!-- 6 divs to create rounded corners //-->
                <div id="left">News content</div> 
                <!-- 7 divs to create rounded corners //-->
            </div>  <!-- end rounded corners //-->
        </div> <!-- end content //-->

        <div id="footer"></div>

    </div><!-- end wrap //-->
</body>

Понятно, что я следую установленному макету из ссылки в первом сообщении .

Тогда в CSS у меня есть: 

html {
    height: 100%;
    margin: 0;
    padding: 0;
} 
body {
    background: #e7e7e7 url(images/cms/background.jpg) repeat-x;
    font-family: Verdana, Arial, sans-serif;
    font-size: .8em;
    height: 100%;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    position: relative; 
    min-height:100%;
}
*html #wrap {     /* IE hack */
    height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: transparent url(images/cms/footer.png) no-repeat bottom center;
    padding: 0;
}
#footer p {
    margin: 0;
    padding: 0;
    padding-top: .7em;
    text-align: center;
}
#footer a {
    text-decoration: none;
}

Это должен быть каждый соответствующий бит ...

Что мне не хватает?

Для справки: нижний колонтитул прилипает к нижней части яйцеклетки в правильном положении, если содержание ниже 100%. Так что, если он не заполняет экран.
Нижний колонтитул находится где-то посередине контента, если контент занимает более 100% страницы, поэтому, когда мне нужно прокрутить, чтобы увидеть все.

0 голосов
/ 04 января 2009

IMO, взлом IE IE вызывает проблему. Попробуйте изменить хаки IE с помощью: 

*html #wrap {
    ...
}
0 голосов
/ 04 января 2009 
    <style type="text/css">
html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    position: relative; 
}
*#wrap {            /* IE hack */
height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    padding: 0;
}
</style>
<div id="wrap">
    <div id="top"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

Это сработало для меня.

...