Пожалуйста , посмотрите на эту ссылку, я хочу наоборот: Когда содержание перетекает в скроллинга, я хочу , чтобы мой колонтитулы быть всегда в полной нижней части страницы, как переполнение стека.
У меня есть div с id="footer"
и этот CSS:
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
Но все, что он делает, это переходит в нижнюю часть окна просмотра и остается там, даже если вы прокрутите вниз, так что он больше не находится внизу.
Образ:
Извините, если не разъяснено, я не хочу, чтобы это было исправлено, только для того, чтобы оно было в самом низу всего контента.
css
positioning
css-position
footer
H Беллами
источник
источник
position:fixed
, хотя это не самый лучший способ сделать этоОтветы:
Это именно то, что
position: fixed
было разработано для:Вот скрипка: http://jsfiddle.net/uw8f9/
источник
fixed
нижним колонтитулом, когда для этого достаточно содержимого. Это достаточно хорошо для меня. Конечно, я могу видеть, как очень большие нижние колонтитулы, такие как то, что они имеют в stackoverflow, не будут хорошо работать с этимfixed
подходом, но для основного однострочного нижнего колонтитула этот подход хорошо работает, на мой взгляд.К сожалению, вы не можете сделать это, не добавив немного дополнительного HTML-кода и полагая, что один фрагмент CSS зависит от другого.
HTML
Сначала вам нужно обернуть ваш
header
,footer
и#body
в#holder
div:CSS
Затем установите
height: 100%
наhtml
иbody
(фактическое тело, а не ваши#body
дела) , чтобы гарантировать , что Вы можете установить минимальную высоту в процентах от дочерних элементов.Теперь установите
min-height: 100%
на#holder
div, чтобы он заполнял содержимое экрана и использовалposition: absolute
нижний колонтитул в нижней части#holder
div.К сожалению, вы должны применить
padding-bottom
к#body
div, который имеет ту же высоту, что и,footer
чтобы убедиться, чтоfooter
он не находится над любым содержимым:Рабочий пример, короткое тело: http://jsfiddle.net/ELUGc/
Рабочий пример, длинное тело: http://jsfiddle.net/ELUGc/1/
источник
width
или оба,left
иright
тогда значения будут установлены в,auto
и элемент будет перенесен, чтобы соответствовать его содержимому. Указаниеwidth: 100%
илиleft: 0
иright:0
гарантирует, что абсолютно позиционированный элемент занимает всю ширину контейнерного элементаheight=100%
на все ваши содержащие элементы, включая<form>
элементы.Просто разработано для другого решения, как в приведенном выше примере есть ошибка (где-то ошибка) для меня. Отклонение от выбранного ответа.
для верстки HTML
Ну, этот способ не поддерживает старый браузер, однако для старого браузера приемлемо прокручивать 30px для просмотра нижнего колонтитула
источник
Я понимаю, что это говорит не использовать это для «ответа на другие ответы», но, к сожалению, у меня недостаточно представителя, чтобы добавить комментарий к соответствующему ответу (!), Но ...
Если у вас возникли проблемы в asp.net с ответом «Моя голова болит» - вам нужно добавить «height: 100%» к основному сгенерированному тегу FORM, а также тегам HTML и BODY, чтобы это работало.
источник
Вы не закрыли свою; после позиции: абсолют. В противном случае приведенный выше код работал бы отлично!
источник
Я бы прокомментировал, если бы мог, но у меня пока нет разрешений, поэтому я опубликую подсказку в качестве ответа для неожиданного поведения на некоторых устройствах Android:
Положение: исправлено работает только в Android 2.1 через 2.3 с использованием следующего метатега:
см. http://caniuse.com/#search=position
источник
Это интуитивно понятное решение с использованием команды viewport, которая просто устанавливает минимальную высоту для высоты области просмотра минус высота нижнего колонтитула.
источник
Я решил похожую проблему, поместив весь мой основной контент в дополнительный тег div (id = "external"). Затем я переместил тег div с id = "footer" за пределы этого последнего "внешнего" тега div. Я использовал CSS, чтобы указать высоту «external» и указал ширину и высоту «footer». Я также использовал CSS для указания полей слева и справа от «нижнего колонтитула» как auto. В результате нижний колонтитул прочно сидит внизу моей страницы и также прокручивает вместе со страницей (хотя он все еще отображается внутри «внешнего» div, но, к счастью, за пределами основного «контентного» div. Который кажется странным, но это где я этого хочу).
источник
Я просто хочу добавить - большинство других ответов отлично сработали для меня; однако, это заняло много времени, чтобы заставить их работать!
Это связано с тем, что настройка определяет
height: 100%
только высоту родительского элемента div!Так что, если весь ваш HTML (внутри тела) выглядит следующим образом:
Тогда будет хорошо следующее:
... как "держатель" поднимет его высоту прямо от "тела".
Престижность моей голове болит, чей ответ был тот, который я закончил тем, что получил работу!
Тем не мение. Если ваш html более вложенный (потому что это всего лишь элемент полной страницы, или он находится внутри определенного столбца и т. Д.), То вам нужно убедиться, что каждый содержащий элемент также
height: 100%
установлен в div. В противном случае информация о высоте будет потеряна между «телом» и «держателем».Например, следующее, где я добавил класс «полная высота» к каждому элементу div, чтобы убедиться, что высота доходит до наших элементов header / body / footer:
И не забудьте установить высоту в классе полной высоты в CSS:
Это исправило мои проблемы!
источник
если у вас есть нижний колонтитул с фиксированной высотой (например, 712 пикселей), вы можете сделать это с помощью js следующим образом:
источник
источник
использовать класс начальной загрузки с фиксированным дном
источник