TalkPHP - View Single Post

9three · 08-13-2009, 07:37 PM

Hi

I'm trying to figure out how to get it to work. If the content of the page is my resolution height then it works fine. But if its more than that and I scroll down, the bar will not move. Basically I need it to "stick" to the bottom of the page. Not sure if I would need to us javascript to determine whether the user is at the initial starting point of the page or scrolling.

tool bar code:

Code:

/* Toolbar */
#toolbar {
  position: absolute;
  width: 100%;
  height: 20px;
  margin: 0px;
  padding: 5px 0px 0px 0px;
  left: 0px;
  bottom: 0px;
  border-top: 2px solid #b5b5b5;
  background: #e5e5e5;
}

I've set the tool bar under and outside my wrapper

Code:

#wrapper 
{
  position: relative;
  margin: 0 auto;
  padding: 0px;
  width: 1000px;
}

Here is the html:

Code:

<div id="wrapper">
  <div id="header">
    header
  </div>
  <div id="content">
    content
  </div>
  <div id="footer">
    <div class="copyright">
      copyright
    </div>
  </div>
</div>

<div id="toolbar">
  <div class="content">Tool bar</div>
</div>

08-13-2009, 07:37 PM	#3 (permalink)
9three The Contributor Join Date: Oct 2008 Posts: 75 Thanks: 4	Hi I'm trying to figure out how to get it to work. If the content of the page is my resolution height then it works fine. But if its more than that and I scroll down, the bar will not move. Basically I need it to "stick" to the bottom of the page. Not sure if I would need to us javascript to determine whether the user is at the initial starting point of the page or scrolling. tool bar code: Code: /* Toolbar */ #toolbar { position: absolute; width: 100%; height: 20px; margin: 0px; padding: 5px 0px 0px 0px; left: 0px; bottom: 0px; border-top: 2px solid #b5b5b5; background: #e5e5e5; } I've set the tool bar under and outside my wrapper Code: #wrapper { position: relative; margin: 0 auto; padding: 0px; width: 1000px; } Here is the html: Code: <div id="wrapper"> <div id="header"> header </div> <div id="content"> content </div> <div id="footer"> <div class="copyright"> copyright </div> </div> </div> <div id="toolbar"> <div class="content">Tool bar</div> </div>