Я нашел много статей по этому предмету, но никто из них не будет работать для меня, я хочу сделать нижний колонтитул, расположенный внизу экрана, когда содержимое недостаточно велико, но когда контент длиннее экрана, который мой нижний колонтитул остается под содержимым и не вставлен в нижней части экрана.Нижний колонтитул нижнего колонтитула
Заранее благодарен!
Вот еще один пример, как это сделать, отлично работает во всех браузерах AFAIK. http://peterned.home.xs4all.nl/examples/csslayout1.html
Edit: Я не автор, просто смотрел себе что-то вроде, что некоторое время назад.
EDIT: Try CSS Sticky Footer: это хорошо и только CSS.
Если вы хотите поэкспериментировать, свойство позиции CSS также может работать. Заказ MDN docs:
#footer {
position: absolute;
bottom: 0;
}
Я просто хочу его в нижней части страницы, а не в нижней части экрана, так что, когда содержание мало что в нижней части экрана, но когда контент большой, вам нужно прокрутить вниз, чтобы увидеть нижний колонтитул. –
Теперь я не знаю, я предлагаю попробовать использовать CSS Sticky Footer для ваших нужд. –
Это на самом деле довольно легко сделать это только с помощью CSS, хотя есть некоторые незначительные ограничения. Вот демо, как это делается (просмотреть исходный код, чтобы получить код):
http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm
Ниже приведено подробное объяснение того, как это работает, в случае, если вам это нужно:
Это на дне, когда контент достаточно большой, но когда он мал, он приходит :( –
Как так? Просто откройте демонстрационную версию и нижний колонтитул остался внизу, хотя контент даже не занимает половину экрана. – Cthulhu
yeah Я знаю, у меня может быть проблема в моем коде, я думаю ... –
- сделать это с помощью яваскрипта
- пример
<div class='content'>
your page
</div>
<div class='Footer'>Footer</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var document_height = $(document).height();
var content_height = $('.content').height();
if (content_height < document_height) {
$('.content').css('height', (document_height));
}
</script>
Я использовал этот точный код, и он делает это : http://gyazo.com/28d5dd1e1893d0c9f264cb9c8bd70b5c –
Это работает, у меня была проблема в моем коде, моя высота тела была установлена на 100, а не на 100%. –