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

Question

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

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

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

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

Спасибо

Answer 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's 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>

Answer 2

исправлено код Даниэля Каниса :

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

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

и в html:

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

Answer 3

Решение jQuery

$(function(){
    $(window).resize(function(){
        placeFooter();
    });
    placeFooter();
    // hide it before it's 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/

Answer 4

Проблема заключается в 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?

Answer 5

Я заключил "проблемный div в другой div", давайте назовем этот div div 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

Answer 6

Я вижу 2 потенциальных проблемы:

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

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

Answer 7

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

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

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

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

Подробнее на http://css -tricks.com / абсолютное позиционирование внутри-относительное позиционирование /

Answer 8

Вот пример использования сетки CSS.

html, body{
    height: 100%;
    width: 100%;
}
.container{
    height: 100%;
    display:grid;
    /*we divide the page into 3 parts*/
    grid-template-rows: 20px auto  30px;
    text-align: center;   /*this is to center the element*/ 
    
}

.container .footer{
    grid-row: 3;   /*the footer will occupy the last row*/
    display: inline-block;
    margin-top: -20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="header">

        </div>
        <div class="content">

        </div>
        <div class="footer">
            here is the footer
        </div>
    </div>
</body>
</html>

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