Question

我正在使用粘性页脚，如果我将窗口调整得更小，然后向上滚动，则不会停留。如果我调整窗口大小，我的主包装器的图像也没有按比例缩小。

工作网址：http://www.nvcc.edu/home/ssuh/footer/index2.html 问题的屏幕截图 - http://www.nvcc.edu/home/ssuh/footer/help.html

有没有办法将页脚保持在页面的底部，直到它到达我的内容？

html：

  <body class="yui-skin-sam  splash_asp">
  <div id="parature_wrapper">  # this has a background image which does not 
  scale right
      <div id="parature_content"></div>  #this has a backgorund image which works.
  </div>

  <div id="footer"></div>
  </body>

的CSS：

*, body {
 margin: 0;
 padding: 0;
}

body {
 font: 62.5% Verdana, Geneva, sans-serif;
 background: url(background.jpg) no-repeat center top fixed;
 height: 100%;
 }
html {
 height: 100%;  
}

 #parature_wrapper {  /*  wrap all of the content */
width: 960px;
margin: 0 auto;
position: relative;
background: url(topheader.png) no-repeat top left ;
height: auto; 
min-height: 100%;
margin-bottom: -30px}


    #parature_content {     /* Main Page Content goes here. Left KB nav is included. */
 position: absolute;
 top: 166px;
 right: 20px;
 width: 630px;
 background:url(content-bg.png) repeat;
 font-size: 1.1em;
 /*height: 5000px; */
 padding-top: 20px;
 padding: 20px;

}

  #footer {

clear:both;
margin: 0 auto;
background: url(footer-bg.png) no-repeat    ;
width: 918px;
bottom: 0;
position: relative;
height:28px;

border-top: solid 1px #a49a8b; 
border-left: solid 1px #a49a8b;
border-right: solid 1px #a49a8b;
}

Answer 1

你可以看到/使用Ryan Fait的粘性页脚：

http://ryanfait.com/sticky-footer/

#footer's height:         30px
#parature_content's top: 165px

也许你应该设置#parachute_content＆gt; .push的高度为（30 + 165）px以适应内容区域的相对位置。

Answer 2

您需要使用position:fixed作为页脚。

这是一个很好的资源：https://developer.mozilla.org/en/CSS/position

当窗口调整大小而不是滚动时，粘性页脚不会停留

2 个答案: