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

Question

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

0

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

Это нормально работает для обычного контента, однако у меня есть страницы, содержимое которых изменяется без обновления страницы. (Использование Javascript для замены содержимого <div> или изменения <div> display: none для display: block). Когда у меня есть ситуация, когда исходная страница меньше по высоте, чем окно (при этом нижний колонтитул внизу), а новое содержимое делает его больше, чем окно, содержимое помещается "позади" нижнего колонтитула (вместо того, чтобы перемещать нижний колонтитул под новым контентом).

Есть ли способ заставить браузер "пересчитать размер" окна и отобразить содержимое страницы с новыми размерами страниц?

<html>
<body>
<body>
<div id="wrapper">        
     <div id="header"><!-- some header content here --> </div>     
     <div id="content" class="footer_padding"> <!-- .footer_padding gives room for the sticky footer -->

         <div class="items"><!-- some normal content here which doesn't change, a list of items in my case, which when clicked, some info is displayed below  -->
              <a href="#" onClick="javascript:showInfoPage('longpage');">Show Item Details</a>
         </div>

         <div id="text">
            <div class="iteminfo" id="defaultpage" style="display: block">
                <!-- default content here, height smaller than window height -->
                <p>Hello this is some content.</p> 
            </div> <!-- #defaultpage .iteminfo -->

            <div class="iteminfo" id="longpage" style="display: none">
                <!-- item content here, height larger than window height -->
                <p>This is some long content...</p>
                <p>This is some long content...</p>
                <p>This is some long content...</p> 
            </div> <!-- #defaultpage .iteminfo -->


         </div><!-- #text -->

      <script language="javascript1.5" type="text/javascript">
       function showInfoPage(slug)
       {
         jQuery('.iteminfo').css("display", "none");
         jQuery('#'+slug).css("display", "block");
       }
      </script>

     </div><!-- #content -->
   </div> <!-- #wrapper -->

   <div id="footer">
         <!-- the sticky footer -->
         <p>Hello, I am the footer, I should always be at the bottom</p>
   </div>
</body>
</html>

CSS:

html
{
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;    
}

body
{
  background-color: #ffffff;
  font-size:15px;
  color: #333333;
  text-align:center;    
  width: 100%;
  height: 100%;
  margin: 0px;
}

div#wrapper
{
  width: 100%;
  min-height: 100%; 
}

div#content
{
  margin: 0 0 0 0;
  padding: 0px;
  overflow: hidden;
  display: block;
  position: relative;   
}

.footer_padding
{
  padding-bottom: 40px;
}


 #footer
 {
   position: relative;
   margin-top: -40px;
   text-align: center;
   width: 100%;
   padding: 10px 0px 10px 0px;
   background:#FFFFFF;
   clear: both;
 }

Я создал JSFiddle, который показывает эту проблему здесь: http://jsfiddle.net/7mUDa/1/

jbx 20 окт. 2013, в 17:48

Источник

Теги:

html

css

sticky-footer

2 ответа

Ещё вопросы

Philip Bulley · Answer 1 · 2015-03-23T11-57-00.000Z

В следующем примере просто добавьте больше содержимого внутри div.page-wrap и следите за тем, чтобы нижний колонтитул был отброшен в соответствии с запросом.

HTML

<div class="page-wrap">

  Content!

</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

CSS

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}

См. Этот пример в CodePen.

Совету: Если сноска не является фиксированной высота или вы хотите, чтобы сделать его отзывчивым, вам нужно будет вычислить ( с помощью Javascript) .site-footer height и .page-wrap margin-bottom значения, основанной на естественной высоту .site-footer. Вы также можете обновить это значение при изменении размера окна браузера. Или для решения, отличного от JS, вы всегда можете использовать медиа-запросы.

Wasiq Ali · Answer 2 · 2013-10-21T03-38-00.000Z

Попробуйте использовать javascript для размещения нижнего колонтитула. Сделайте два нижних колонтитула и поместите их в отдельные div.

<div id="footer1>
this is my footer.
</div>
<div id="footer2">
this is my footer.
</div>

Как вы можете видеть, содержание нижнего колонтитула в обоих div будет одинаковым, а затем через javascript используйте условные операторы, чтобы проверить, превышает ли содержимое окно браузера:

$(window).height();

Если он не превышает высоту, используйте нижний колонтитул 1 с абсолютным положением в нижней части экрана и сохраняйте видимость другого нижнего колонтитула: false. Если это так, используйте footer2 с относительным положением к содержимому и сохраняйте видимость нижнего колонтитула: false.

Ваше решение кажется слишком сложным для такой маленькой проблемы. Я должен был бы повторить нижний колонтитул дважды, что не так просто, как «это мой нижний колонтитул».
Хм, попробую сегодня еще раз взглянуть.
Извините, я неправильно понял ваш вопрос. Я привык делать это только с CSS. но вот ссылка, которая может помочь с тем, что вы пытаетесь сделать: stackoverflow.com/questions/16566468/…
@JFelton Да, я хочу полное решение CSS, если это возможно. Javascript просто переключает видимый контент <div> . Если это возможно, только через CSS, то всегда лучше.