нижний колонтитул внизу текст в середине

Question

Я пытаюсь поддерживать нижний колонтитул внизу, независимо от того, сколько текста в нем содержится. Что я делаю неправильно? Раскладка:

.top{ 
    width:500px; 
    height:100px; 
    background-color:black; 
} 

.content{ 
    width:500px; 
    min-height:100%; 
    position:relative; 
} 

.footer{ 
    width:500px; 
    height:100px; 
    background-color:blue; 
    position:absolute; 
    bottom:0; 
} 

<div class="top"></div> 
<div class="content"></div> 
<div class="footer"></div> 

http://jsfiddle.net/RDuWn/68/

С уважением, Саймон

Answer 1

Я думаю, что вы должны использовать положение: исправлен так:

.footer{ 
    width:500px; 
    height:100px; 
    background-color:blue; 
    position:fixed 
    bottom:0; 
} 

DEMO

Answer 2

I Would удалить position:absolute; bottom:0; из .footerFiddle

Answer 3

в вашем jsfiddle,

.footer{ 
    width:500px; 
    height:100px; 
    background-color:blue; 
    position:fixed; 
    bottom:-1px; 
} 

работает для меня ..

см fiddle

см bottom:-1px; будет гарантировать вашу позицию через браузеры ...

Answer 4

Ваш код работает, но вам нужно установить минимальную высоту вместо высоты в нижнем колонтитуле s, чтобы он мог растягиваться до вашего размера содержимого.

.footer{ 
    width:500px; 
    min-height:100px; 
    background-color:blue; 
    position:fixed; 
    bottom:-1px; 
} 

Here's how it will look с этим изменением, и некоторое содержание заполнителя добавляются в сноску.

Answer 5

Это было ваше абсолютное позиционирование, вызвавшее перекрытие. Абсолютный элемент удаляется из нормального потока и сам по себе игнорируется другими элементами при определении положения. Если вы не укажете позицию в css, по умолчанию будет установлено статическое позиционирование, и все элементы будут правильно находиться в «потоке».

http://www.w3schools.com/css/css_positioning.asp

Вот CSS я использовал:

.top{ 
    width:500px; 
    height:100px; 
    background-color:pink; 
} 

.content{ 
    width:500px; 
    min-height:100%; 
    background-color:blue; 
} 

.footer{ 
    width:500px; 
    height:100px; 
    background-color:black; 
    margin-bottom:0px; 
}