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

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

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

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

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

спасибо

71
css positioning sticky-footer

8 ответов

вы должны использовать липкое решение нижнего колонтитула, такое как это:

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

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

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

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

и в html:

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

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

26

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

5

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

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

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

3

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

2

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

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

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

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

больше деталей на http://css-tricks.com/absolute-positioning-inside-relative-positioning/

1

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

0