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) і центрувала текст, тоді вам потрібно додати "вирівнювання тексту: по центру" до вашого визначення.

Я вклав "проблемний div в інший div", дозволимо назвати цей div закритим div ... зробимо закритий div у css шириною 100% і позицію зафіксовано дном 0 ... потім вставте div 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>

Ось тобі!
- Гіпертекстий

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

Існує кращий спосіб зробити це. Просто створіть тіло з положенням: відносне та відступ до розміру нижнього колонтитула + простір між вмістом та колонтитулом, який ви хочете. Тоді просто створіть div нижнього колонтитула з абсолютним та нижнім: 0.

Я пішов копати пояснення, і зводиться до цього:

• За замовчуванням абсолютна позиція знизу: 0px встановлює його в нижню частину вікна ... а не внизу сторінки.
• Відносне позиціонування елемента скидає обсяг абсолютного положення його дітей ... тому, встановивши тіло на відносне позиціонування, абсолютне положення знизу: 0px тепер справді відображає нижню частину сторінки.

Детальніше на http://css-tricks.com/absolute-positioning-inside-relative-positioning/

ось приклад використання 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 grid: конкретний приклад

Я зіткнувся з проблемою, коли типове 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>