CSS: закреплен внизу и по центру

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

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

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

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

благодаря

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

* {
    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>

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

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

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

и в html:

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

Решение 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/

Проблема в том 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?

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

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

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

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

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

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

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

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

Подробнее см. Http://css-tricks.com/absolute- позиционирование-inside-relative- позиционирование/.

вот пример использования css grid.

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: конкретный пример

Я столкнулся с проблемой, когда типичная position: fixedи bottom: 0не работала. Обнаружил аккуратную функциональность сposition: sticky . Обратите внимание, что он «относительно» новый, поэтому не будет в IE / Edge 15 и ранее.

Вот пример для w3schools.

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: sticky;
  bottom: 0;
  background-color: yellow;
  padding: 30px;
  font-size: 20px;
}
</style>
</head>
<body>

<p>Lorem ipsum dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas </p>

<div class="sticky">I will stick to the screen when you reach my scroll position</div>

</body>
</html>