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

Question

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

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

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

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

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

спасибо

8 71

css positioning sticky-footer

8 ответов:

пересмотренный code by Daniel Kanis:

просто измените следующие строки в 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... сделайте так, чтобы вложенный 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">
    
    </div>
</div>
вот так!
- Hypertextie

2

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

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

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

по умолчанию абсолютное положение дна: 0px устанавливает его в нижней части окно...не в нижней части страницы.

относительное расположение элемента сбрасывает область его дочернего Абсолюта position...so установив тело в относительное положение, абсолютное положение bottom: 0px теперь действительно отражает нижнюю часть страницы.

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

1

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

0

marcgg · Accepted Answer · 2017-06-26 14:59:55

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

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