CSS: фиксированный снизу и центрированный

Мне нужно, чтобы мой нижний колонтитул был закреплен в нижней части страницы и центрировал его. Содержимое нижнего колонтитула может меняться в любое время, поэтому я не могу просто центрировать его с помощью margin-left: xxpx; margin-right: xxpx;

Проблема в том, что по какой-то причине это не работает:

#whatever {
  position: fixed;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
}

Я просканировал сеть и ничего не нашел. Я попробовал сделать контейнерный div и nada. Я пробовал другие комбинации и gurnisht. Как я могу это сделать?

Спасибо

ОТВЕТЫ

Ответ 1

Вам следует использовать решение с липким нижним колонтитулом, например, следующее:

* {
    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 height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Есть и другие подобные:

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    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;}

с html:

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>

Ответ 2

пересмотренный код Daniel Kanis:

просто измените следующие строки в CSS

.problem {text-align:center}
.enclose {position:fixed;bottom:0px;width:100%;}

и в html:

<p class="enclose problem">
Your footer text here.
</p>

Ответ 3

Решение jQuery

$(function(){
    $(window).resize(function(){
        placeFooter();
    });
    placeFooter();
    // hide it before it positioned
    $('#footer').css('display','inline');
});

function placeFooter() {    
    var windHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var offset = parseInt(windHeight) - parseInt(footerHeight);
    $('#footer').css('top',offset);
}

<div id='footer' style='position: fixed; display: none;'>I am a footer</div>

Иногда проще реализовать JS, чем взломать старый CSS.

http://jsfiddle.net/gLhEZ/

Ответ 4

Есть две потенциальные проблемы, которые я вижу:

1 - У IE были проблемы с позицией: исправлено в прошлом. Если вы используете IE7 + с допустимым doctype или браузером, отличным от IE, это не является частью проблемы.

2 - Вам нужно указать ширину нижнего колонтитула, если вы хотите, чтобы объект нижнего колонтитула был центрирован. В противном случае по умолчанию будет отображаться полная ширина страницы, а автомартация для левого и правого значений будет равна 0. Если вы хотите, чтобы нижняя колонка занимала ширину (например, панель уведомлений StackOverflow) и центрировала текст, вам нужно добавить "text-align: center" в ваше определение.

Ответ 5

Задача лежит в position: static. Статические средства вообще не занимаются позицией. position: absolute - это то, что вы хотите. Однако центрирование элемента все еще сложно. Должно работать следующее:

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 0px;
  right: 0px;
}

или

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 50%;
  transform: translate(-50%, 0);
}

Но я рекомендую первый метод. Я использовал методы центрирования из этого ответа: Как центрировать абсолютно позиционированный элемент в div?

Ответ 6

Я заключил "проблемный div в другой div", чтобы вызвать этот div, заключить div... make enclose div в css имеет ширину 100%, а позиция фиксируется с нижней частью 0... затем вставьте задачу div в конец div, как это выглядело бы.

#problem {margin-right:auto;margin-left:auto; /*what ever other styles*/}
#enclose {position:fixed;bottom:0px;width:100%;}

затем в html...

<div id="enclose">
    <div id="problem">
    <!--this is where the text/markup would go-->
    </div>
</div>

Там ты идешь! - Hypertextie

Ответ 7

Основываясь на комментарии от @Michael:

Есть лучший способ сделать это. Просто создайте тело с помощью position: relative и padding размер нижнего колонтитула + пространство между содержанием и нижним колонтитулом, который вы хотите. Затем просто создайте нижний колонтитул с абсолютное и нижнее: 0.

Я пошел копаться в объяснении, и это сводится к следующему:

  • По умолчанию абсолютное положение дна: 0px устанавливает его в нижнюю часть окна... не в нижней части страницы.
  • Относительное позиционирование элемента сбрасывает объем его детального абсолютного положения... поэтому, устанавливая тело в относительное позиционирование, абсолютное положение дна: 0px теперь действительно отражает нижнюю часть страницы.

Подробнее на http://css-tricks.com/absolute-positioning-inside-relative-positioning/