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

Question

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

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

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

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

Благодаря

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

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

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

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

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

Я заключенная «проблемы 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> 

Там ya go!
- Hypertextie

Answer 5

пересмотренная 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> 

Answer 6

Основываясь на комментарий от @Michael:

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

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

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

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

Answer 7

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

Но я рекомендую первый метод. Я использовал методы центрирования из этого ответа: How to center absolutely positioned element in div?

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