sticky footer does not stay down when window is resized smaller and than scrolled_问答_开发者

sticky footer does not stay down when window is resized smaller and than scrolled

开发者 https://www.devze.com 2023-04-13 06:34 出处：网络

I\'m using a sticky footer that will not stay down if i resize the window smaller and then scroll up.Also the image for my main wrapper is not scaling down proplery if i resize the window.

相关专题：css

I'm using a sticky footer that will not stay down if i resize the window smaller and then scroll up. Also the image for my main wrapper is not scaling down proplery if i resize the window.

working url: http://www.nvcc.edu/home/ssuh/footer/index2.html screenshot of problem - http://www.nvcc.edu/home/ssuh/footer/help.html

is there way to keep the footer on the bototm of the page until it hits my content?

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;
}

You could see/use Ryan Fait's sticky footer:

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

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

Maybe you should set #parachute_content > .push's height to (30+165)px to adapt to the relative positioning of the content area.

You need to use position:fixed for your footer.

Here's a good resource for you: https://developer.mozilla.org/en/CSS/position

sticky footer does not stay down when window is resized smaller and than scrolled

精彩评论

关注公众号

热门标签

图文推荐

sticky footer does not stay down when window is resized smaller and than scrolled

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：