Как сделать нижний колонтитул, который будет придерживаться нижней части страницы и который будет перемещаться вместе с моим контентом? Я пробовал использовать position, но когда на экране было больше контента, чем на экране, нижний колонтитул оставался внизу экрана, а поверх него поверх него накладывался контент.Прикрепите нижний колонтитул к нижней части страницы
Этот метод исправил мою проблему. Я думаю, что он должен исправить всю проблему, связанную с липким нижним колонтитулом. Спасибо, что ответили на мой вопрос.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
footer.bottom {
position: fixed;
bottom: 0px;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
if ($('#x')[0].scrollHeight < $(window).height()) {
$('footer').addClass('bottom');
} else {
$('footer').removeClass('bottom');
}
});
</script>
</head>
<body>
<div id="x">
<table height="1000" bgcolor="#999999">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<footer>
Lorem Ipsum
</footer>
</div>
</body>
</html>
, если вы используете:
position:fixed;
bottom:0px;
Это должно сделать это
И width:100%;, если вам это нужно.
Но мне нужен нижний колонтитул, который всегда должен стоять после содержимого. position: фиксированный footer будет фиксирован на странице всегда. –
, пожалуйста, прочитайте вопрос: «Я попытался использовать позицию. Но когда содержимое стало больше высоты монитора, тогда содержимое будет перезаписано на нижнем колонтитуле». – Radian
Я хотел бы сделать класс CSS для колонтитула -
footer.bottom {
position: fixed;
bottom: 0px;
}
чем с JQuery
if ($(document).height() < $(window).height()) {
$('footer').addClass('bottom');
} else {
$('footer').removeClass('bottom');
}
Итак, если тело короче, чем окно, было бы добавить класс, чтобы сделать его придерживаться нижней части, но если тело выше, тогда это было бы нормально.
Почему вы его уменьшаете ? – pie6k
Это приемлемый ответ мне. Работает отлично. –
Я полагаю, вы используете div для создания нижнего колонтитула. Вы пробовали свойство CSS z-index? При увеличении z-index элемент будет отображаться спереди.
Просто предложение попробовать.
показать скрипку того, что вы пытались – Hiral
Это дублируется здесь: http://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly - Помог ли вам Google это? – BFWebAdmin
Почему Почему Почему после стольких вопросов и вопросов, почему возникает неполный вопрос. Мы не можем построить целую страницу, сидящую здесь. – Anobik