Div on the bottom of Browser window

Last post 11-21-2008 3:45 PM by rossisdead. 3 replies.

Sort Posts:

  • Div on the bottom of Browser window

    11-19-2008, 4:27 AM
    • Member
      point Member
    • Adawi9
    • Member since 11-19-2008, 9:20 AM
    • Posts 1

    Hi

     I want to ask about how I can mak a div to be Browser window and it must be fixed and no be affected with scrollbar like the Application bar on facebook app;ication

     

    Thanks U all

    Adawi Adawi Smile

  • Re: Div on the bottom of Browser window

    11-19-2008, 6:49 AM

    if the content of the page is more then the window size , then div with scroll will automatically comes.

    Happing coding

    Naveen Kumar S
  • Re: Div on the bottom of Browser window

    11-19-2008, 8:07 AM
    Answer
    • Member
      708 point Member
    • raju dasa
    • Member since 11-05-2008, 4:20 PM
    • Posts 124

    Hi, 

    here is the code for constant position of div.

    <div style="position: absolute; top: 8px; left: 5px; z-index: 101;">text here</div>

    u can include 'BackgroundColor' , width, height also.

    try experimenting.

    ---------------------------------------------

    Mark as Answered, if u got. Happy Coding.

  • Re: Div on the bottom of Browser window

    11-21-2008, 3:45 PM
    Answer
    • Member
      149 point Member
    • rossisdead
    • Member since 11-21-2008, 2:43 PM
    • Posts 20

     Hey Adawi,

    There's not a perfect solution for this. You could try setting up a style class like this:

         .footer { position: fixed; bottom: 0px; }

     However, Internet Explorer does not support the position: fixed attribute(as of IE7, not sure about IE8 beta)

    You could try creating a javascript function that will constantly keep the footer element at the bottom of the screen when the window is either scrolled or resized, however this looks rather jagged as you'll see the object move all over the place before it finally rests to the bottom again.

    The best way that I have found of doing it is like this:

    1. Put all of your content in one large div, let's give it a class of .FakeBody

    2. Set .FakeBody to the width and height to the size of the browser window, and setting overflow:scroll;

    NOTE: The main con with this method is that it's not entirely CSS. You would need to create a javascript function that detects resizing of the browser window in order to resize .FakeBody, otherwise it won't fill up the browser window. 

    2. Set the body tag to overflow:hidden;. This will make the browser look like it's scrolling just like it would at any other time.

    3. Take the footer element and keep it outside of the div you made in the first step

    4. Set the footer element to position:absolute; bottom:0px;. This will keep it anchored to the bottom of the page.

    5. If your footer element is being hidden by .FakeBody, set .FakeBody's z-index attribute to a number lower than the footer element's


Page 1 of 1 (4 items)