#1
  1. Plays with fire
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    942
    Rep Power
    97

    Two divs in harmony


    Is it possible to force a div with a fixed height of 100px to the bottom of the screen and have a div above it change its height according to the browser?

    I have the bottom:

    Code:
    #bottom {height: 100px; background-color: #f00; bottom: 0; position: absolute; width: 100%;}
    I can have a div above it be 100% height with padding inside be 100px, but that seems wrong.
    Last edited by Frank Grimes; February 7th, 2013 at 02:10 PM.
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    708
    Rep Power
    441
    If the bottom one is meant to be a footer, I'd suggest you do a search for "sticky footer". There are a few techniques for that.
  4. #3
  5. Plays with fire
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    942
    Rep Power
    97
    Not a footer, but a graphic element that's meant to bleed off the screen bottom.
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    708
    Rep Power
    441
    I'd still suggest looking at sticky footer techniques to see if it will fit what you're looking for. Otherwise a mockup might be helpful.
  8. #5
  9. Plays with fire
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    942
    Rep Power
    97
    Yeah, I'll tinker with it and see what I can do.

    Thanks for the idea!
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence

IMN logo majestic logo threadwatch logo seochat tools logo