CSS Footer, который работает в IE и Firefox - PullRequest
Новая
       13

CSS Footer, который работает в IE и Firefox

1 голос
/ 19 апреля 2009

Привет, ребята. Я пытаюсь добавить нижний колонтитул 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>

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

Ответы [ 4 ]

1 голос
/ 19 апреля 2009

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

#footer {clear: both;
        }

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

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

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

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

1 голос
/ 19 апреля 2009

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

0 голосов
/ 22 апреля 2009

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

0 голосов
/ 19 апреля 2009

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

...