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

Я использую технику 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/


html css sticky-footer
person jbx    schedule 20.10.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

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

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

$(window).height();

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

person Wasiq Ali    schedule 21.10.2013
comment
Ваше решение кажется слишком сложным для такой маленькой проблемы. Мне пришлось бы повторить нижний колонтитул дважды, что не является чем-то простым, как «это мой нижний колонтитул». - person jbx; 21.10.2013
comment
Хм, сегодня попробую еще раз взглянуть. - person JFelton; 21.10.2013
comment
Извините, я неправильно понял ваш вопрос. Я привык делать это только с помощью css. но вот ссылка, которая может помочь с тем, что вы пытаетесь сделать: stackoverflow.com/questions/16566468/ - person JFelton; 21.10.2013
comment
@JFelton Да, если возможно, мне нужно полное решение CSS. Javascript просто переключает видимое содержимое <div>. Если это возможно, только через CSS, это всегда лучше. - person jbx; 25.10.2013

arrow_upward
0
arrow_downward

В следующем примере просто добавьте больше содержимого в 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, вы всегда можете использовать медиа-запросы.

person Philip Bulley    schedule 23.03.2015