Сделать нижний колонтитул DIV нижним после загрузки содержимого AJAX

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

Кто-нибудь знает, как это исправить? Я использую jquery для вставки содержимого AJAX после загрузки страницы.

Я уже пробовал использовать положение: абсолютное; внизу: 0; left: 0 на нижнем колонтитуле, но все еще остается там после вызова AJAX.

Заранее спасибо.

<body style="width:100%; height:100%;" onload="displayContent()"> 
    <div id="main" style="width:100%; height:100%;" > 
     <div id="header" style="width:100%; height:10%;"> 
      <div style="width:100%; height:100%;"> 
       <div style="display:inline; float:left; width:10%; height:100%;">Logo</div> 
       <div style=" display:inline; float:right; width:90%; height:100%;">Navigation Links</div> 
      </div> 
     </div> 
     <div style="width:100%; height:5%;"> 
      Navigation links go here 
     </div> 
     <div id="body" style="width:100%; height:75%;"> 
      <div id="content" style="display:inline; float:left; width:70%; height:100%;">Main content from AJAX call after page onload goes here</div> 
      <div style="display:inline; float:right; width:30%; height:100%; background:red;">Other stuff here</div> 
     </div> 
     <div id="footer" style="width:100%; height:10%;"> 
      FOOTER NEEDS TO UPDATE ITSELF AFTER AJAX CALL 
     </div> 
    </div> 
</body>

источник

2015-02-28 Marquinio

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

Я не поощряет использование встроенных стилей

<body style="width:100%; height:100%;" onload="displayContent()"> 
 
    <div id="main" style="width:100%; height:100%;" > 
 
     <div id="header" style="width:100%; height:10%;"> 
 
      <div style="width:100%; height:100%;"> 
 
       <div style="display:inline; float:left; width:10%; height:100%;">Logo</div> 
 
       <div style=" display:inline; float:right; width:90%; height:100%;">Navigation Links</div> 
 
      </div> 
 
     </div> 
 
     <div style="width:100%; height:5%;"> 
 
      Navigation links go here 
 
     </div> 
 
     <div id="body" style="width:100%; height:auto; overflow: hidden;"> 
 
      <div id="content" style="display:inline; float:left; width:70%; height:100%;">Main content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes hereMain content from AJAX call after page onload goes here</div> 
 
      <div style="display:inline; float:right; width:30%; height:100%; background:red;">Other stuff here</div> 
 
     </div> 
 
     <div id="footer" style="width:100%; height:10%;"> 
 
      FOOTER NEEDS TO UPDATE ITSELF AFTER AJAX CALL 
 
     </div> 
 
    </div> 
 
</body>

источник

2015-02-28 14:51:11

Да это работает. Большое спасибо. – Marquinio

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

источник

2015-02-28 14:50:59

Сделать нижний колонтитул DIV нижним после загрузки содержимого AJAX

ответ

Смежные вопросы