Нижний колонтитул CSS, который работает в IE и Firefox

Привет, ребята, я пытаюсь добавить нижний колонтитул css, но он не может работать правильно. На данный момент я настраиваю его как сумасшедший, и если он выглядит нормально в Firefox, он все испортит в Internet Explorer 7, а иногда и на полпути вверх по странице :(. Есть ли хороший пример для нижнего колонтитула на основе css.

Учтите, что моя страница имеет фиксированную ширину, 2 столбца разной высоты, а нижний колонтитул имеет 100-процентную ширину.

Ну, я использую липкий нижний колонтитул css как есть - кажется, он отлично работает в Firefox, но в IE мой нижний колонтитул плавает на полпути вверх по странице. Я заметил, что мой нижний колонтитул висит в нижней части окна просмотра браузера. Я думаю, что IE интерпретирует высоту как 100 процентов. Липкий нижний колонтитул css отлично работает сам по себе, но по мере того, как я добавляю свои модификации и дополнения, он искажается в IE. Базовый код для нижнего колонтитула и верхнего колонтитула выглядит следующим образом:

@charset "utf-8";
/* CSS Document */

html, body, #wrap {height: 100%;}
body > #wrap > #main > #pageContent {height: auto !important; min-height: 100%;}

#main
{
    background-color:#FFFFFF;
    width:960px;
    height:100% !important;
    text-align:left;
    position:relative;
}

#footer
{
    display:block;
    width:100%;
    text-align:center;
    position: relative;
    height: 150px;
    clear:both;

}
/* CLEAR FIX*/
.clearfix:after 
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix 
{
    display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
.clearfix 
{   
    display: block;
}
/* End hide from IE-mac */

И HTML примерно такой

<div id="wrap">
 <div> header is here</div>
 <div id="main" class="clearfix">content is here </div>
</div>
<div id="footer"></div>

Где я все испортил


css internet-explorer firefox footer
person Ali    schedule 19.04.2009    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Я бы попробовал CSS Sticky Footer.

person Dan Lew    schedule 19.04.2009

arrow_upward
1
arrow_downward

Я думаю, это зависит от того, чего вы пытаетесь достичь. Первое предложение, которое у меня есть, это использовать:

#footer {clear: both;
        }

Это, по крайней мере, подтолкнет нижний колонтитул ниже самой длинной из колонок, если предположить, что их больше одной.

Второе предложение и мое предпочтительное решение (учитывая, что я не уверен в совместимости между браузерами и ОС):

#footer {position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         }

Это довольно очевидно, но, по сути, прикрепляет нижний колонтитул к нижней части страницы и позволяет настраивать #footer в соответствии с его содержимым, также это означает, что #footer будет шириной 100% (плюс-минус пиксель), так что настройте по вашему дизайну.

person David says reinstate Monica    schedule 19.04.2009

arrow_upward
0
arrow_downward

Не могу сказать, не видя кода, но с макетом из двух столбцов у вас, вероятно, есть хотя бы один плавающий столбец. Размещение style="clear:both" в нижнем колонтитуле должно привести его к нижней части страницы.

person allclaws    schedule 19.04.2009

arrow_upward
0
arrow_downward

Я разобрался - по какой-то причине было два экземпляра clear: оба, хотя я не понимаю, как это вызывало проблему, но удаление избыточной записи исправило ее:\ одно из тех странных решений, которые, кажется, не делают никаких смысл. Спасибо в любом случае, ребята.

person Ali    schedule 22.04.2009