Почему нижний колонтитул не доходит до конца? - PullRequest
Новая
       16

Почему нижний колонтитул не доходит до конца?

0 голосов
/ 02 февраля 2010

У меня есть веб-страница следующим образом: http://www.transeeq.com/health/bq17a.html#

Желтоватый нижний колонтитул не выдвигается полностью до самого дна. Есть идеи? Вот код CSS: 

#container {
   min-height:100%;
   position:relative;
}

#body {
   padding-bottom:60px;   /* Height of the footer */
}

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;          /* Height of the footer */
   background:#CCCC66;
}

Ответы [ 8 ]

1 голос
/ 02 февраля 2010

Попробуйте код CSS, чтобы получить «липкий нижний колонтитул» (за http://ryanfait.com/sticky-footer/).

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    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 */
}
1 голос
/ 02 февраля 2010

Я использую этот CSS. 

* {
       margin: 0;
}
html, body {
       height: 96%;
}
.wrapper {
       min-height: 96%;
       height: auto !important;
       height: 96%;
       margin: 0 auto -4em;
}
.footer, .push {
       height: 4em;
}

И вы можете использовать его на своей HTML-странице, как это 

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

Очень хорошо работает в IE и Firefox

1 голос
/ 02 февраля 2010

Работает; Ваш CSS, вероятно, кэшируется локально. Вы сделали принудительное обновление браузера в последнее время? Нажмите Ctrl + F5.

0 голосов
/ 02 февраля 2010

Поместите ваш footer в container div - если вы хотите, чтобы нижний колонтитул находился внизу страницы (а не внизу окна), используя position: absolute, вам нужно поместить его в относительно позиционированное положение. div, такой как ваш контейнер.

Посмотрите на эту статью

0 голосов
/ 02 февраля 2010

Попробуйте position: fixed в нижнем колонтитуле, если вы хотите, чтобы он всегда был внизу окна. В противном случае, чтобы он всегда находился внизу документа, вы можете сохранить его положение как относительное / авто.

0 голосов
/ 02 февраля 2010

у вас есть "высота: 60px;" в # нижнем колонтитуле. Попробуйте сделать это меньшее число в .css.

0 голосов
/ 02 февраля 2010

Вы пытались переместить нижний колонтитул вниз и изменить положение на относительное?

0 голосов
/ 02 февраля 2010

Я только что проверил это; он распространяется на дно в Chrome, Firefox, Opera, Safari, IE8, IE7 и даже IE6. В каком браузере вы столкнулись с этой проблемой, и можете ли вы описать ее более подробно?

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

Нет похожих вопросов

...