Question

如果内容小于浏览器窗口的高度，我使用'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/

Answer 1

尝试使用javascript来定位页脚。制作两个页脚并将它们放在单独的div中。

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

如您所见，两个div中页脚的内容将相同，然后通过javascript使用条件语句检查内容是否超过浏览器窗口：

$(window).height();

如果它没有超过高度，请在屏幕底部使用具有绝对位置的footer1，并保持另一个页脚的可见性：false。如果是这样，请使用与内容相对位置的footer2并保持其他页脚的可见性：false。

Answer 2

在以下示例中，只需在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;
}

请参阅this example on CodePen。

提示：如果您的页脚不是固定高度或者您想要使其响应，则需要计算（使用Javascript）.site-footer height和{ {1}} .page-wrap值基于margin-bottom的自然高度。您可能还希望在调整浏览器窗口大小时更新此值。或者对于非JS解决方案，您始终可以使用媒体查询。

具有不同内容高度的粘性页脚，无需刷新页面

2 个答案:

HTML

CSS