компоновка css для нижнего колонтитула с динамическим содержанием ajax, изменяющим высоту страницы - PullRequest
Новая
       9

компоновка css для нижнего колонтитула с динамическим содержанием ajax, изменяющим высоту страницы

2 голосов
/ 09 октября 2009

[Update]

Я на самом деле пошел на компромисс с этой проблемой, отказавшись от дизайна фиксированного нижнего колонтитула.

Кажется, что нет проблем с динамическим содержимым, перемещающим нижний колонтитул и соответствующим образом изменяющим размер контейнеров, если нижний колонтитул изначально не был прикреплен к нижней части браузера.

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

Я провел весь день, пытаясь заставить нижний колонтитул переместиться вниз по странице, чтобы разместить динамически добавляемый (через ajax) контент. Мне действительно нужны некоторые указатели или ссылки, потому что я не нашел ничего, что могло бы помочь.

В основном:

У моего сайта есть несколько страниц, которые начинаются только с текстового поля и кнопки, поэтому общая высота области содержимого составляет всего несколько дюймов ниже области заголовка.

У меня нет проблем с запуском липкого нижнего колонтитула, так что нижний колонтитул появляется в нижней части окна браузера, даже если на экране очень мало контента.

Тот же макет css отлично работает для других страниц, содержимое которых выходит за пределы окна браузера.

Улов:

Контент должен отображаться и передаваться в браузер с начальной загрузкой.

Проблема:

Любой контент, который добавляется на страницу через AJAX после первоначальной загрузки, правильно рисует страницу, но нижний колонтитул остается в своем первоначальном расположении.

Пожалуйста, скажите мне, что есть исправление для этого. Я не могу опубликовать css до тех пор, пока сначала не свяжусь с моим боссом - если возможно - и, если потребуется, позже - но это всего лишь очень базовая версия многих липких нижних колонтитулов css, плавающих по сети.

Спасибо.

Ответы [ 6 ]

2 голосов
/ 04 мая 2011

В настоящее время исправлена ​​аналогичная ситуация с небольшими jQuery и CSS, где параметр является объектом div нижнего колонтитула (т.е. $ ("# mainfooter")): 

function positionFooter(obj){
    if ($("body").outerHeight(true) > $(window).height()) {
        obj.css("position","relative");
    } else {
        obj.css("position","fixed");
        obj.css("bottom","0px");
    }
 }

Привязать эту функцию к $ (документ) .ready и $ (окно) .resize. Если вызов ajax изменяет размер тела, его следует вызывать и после загрузки содержимого.

2 голосов
/ 09 октября 2009

Похоже, что ваш нижний колонтитул использует display: fixed или подобное. Попробуйте изменить контейнер вашего нижнего колонтитула на: 

bottom: 0;
display: block;
position: absolute;

Это гарантирует, что он появится прямо в нижней части контейнера, в котором он находится (я предполагаю тег <body>). Теперь ваша проблема заключается в том, что он появляется в нижней части экрана , а не в нижней части документа, который начинает становиться намного короче. Это можно сделать несколькими способами, но, возможно, проще всего будет установить минимальную высоту для вашего контейнера содержимого AJAX: 

min-height: 600px;
height: auto !important /* This is a hack to make IE6 fix itself to a set height */
height: 600px; /* IE6 will always follow whatever instruction appears last, even if !important is specified */

Другой подход заключается в том, что, поскольку вы используете библиотеку JavaScript (я полагаю?) Для захвата необходимого содержимого, возможно, вы также можете настроить высоту контейнера содержимого AJAX или изменить CSS нижнего колонтитула после загрузки содержимого? 1011 *

0 голосов
/ 20 июля 2013

Я решил ту же проблему с помощью следующего кода, где content - это идентификатор div, где php-страницы загружаются, а footer - это тег footer. 

var footerAdjustId = setInterval(adjustFooter, 2000);

function adjustFooter(){
    $("footer").css("marginTop", $("#content").height() - $(window).height());
    clearInterval(footerAdjustId);
}
0 голосов
/ 02 сентября 2010

Я не уверен, что вы ищете это, но я также сталкивался с той же проблемой и раньше и тем же CSS, где мой контент перекрывается в нижнем колонтитуле, когда я вызываю ajax через метод jQuery.

Теперь я нашел решение: просто получите высоту div через jQuery и примените высоту к div, куда вы возвращаете свои результаты из ajax. 

var obj = $("#viewcomm").height(); 
if($.browser.msie) {
  $("#viewcomm").height(obj).css({cursor:"auto"});
}

где здесь viewcomm - это div ID.

0 голосов
/ 24 декабря 2009

Используйте include в PHP и вызывайте нижний колонтитул после появления динамического содержимого.

0 голосов
/ 09 октября 2009

Без какого-либо кода трудно сказать, в чем может быть проблема.

Однако я использую липкий нижний колонтитул , как описано здесь , который работает очень хорошо, хотя я не добавил в него содержимое ajax. Хотя изменение размера браузера работает очень хорошо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...