SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    bottom:0px; relative to page height?

    I have two div's one is taller than the other because of it's content and has no height value. I want the other one, which has no content other than a footer image, to be the same height so that the bottom of that div is flush with the bottom of the page. The closest thing I have come up with is:
    position: absolute;
    bottom: 0px;

    But this places the bottom relative to the browser window and not the actual height of the page which needs a scroll bar.


    Is it possible to do this?
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com

  2. #2
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know what happened with my last post. Sorry. I'll try again.

    Here's my code to see what I mean. The btmleft and btmright divs won't extend to the very bottom.
    -html-
    <div id="layer1">
    <div id="topleft">
    <p>Top Left</p>
    </div>
    <div id="topright">
    <p>Top Right</p>
    </div>
    <div id="btmleft">
    <p>Bottom Left</p>
    </div>
    <div id="btmright">
    <p>Bottom Right</p>
    </div>

    <div id="layer2">
    <div id="content">
    <p>Content Field</p>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <p>test</p>
    </div>
    </div>
    </div>
    -css-
    body {
    background: #fff;
    padding: 0;
    margin: 0;
    }
    p {
    color: #00FF00;
    padding: 0;
    margin: 0;
    }

    #layer1 {
    width: 100&#37;;
    padding: 0;
    margin: 0;
    background: #000011;
    bottom: 0px;
    }
    #topleft {
    width: 50%;
    height: 444px;
    margin: 0;
    padding: 0;
    background: #FFFF00 url(left.png);
    position: absolute;
    top: 0px;
    }
    #topright {
    width: 50%;
    height: 444px;
    margin: 0;
    padding: 0;
    background: #0000FF url(left.png);
    position: absolute;
    top: 0px;
    left: 50%;
    }
    #btmleft {
    width: 50%;
    margin: 0;
    padding: 0;
    background: #0000FF url(left.png);
    position: absolute;
    top: 444px;
    bottom: inherit;
    }
    #btmright {
    width: 50%;
    margin: 0;
    padding: 0;
    background: #FFFF00 url(right.png);
    position: absolute;
    top: 444px;
    bottom: inherit;
    left: 50%;
    }

    #layer2 {
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    top: 0;
    z-index: +1;
    background: none;
    }

    #content {
    width: 900px;
    padding: 0;
    background: #FF0000;
    /* for IE */
    filter:alpha(opacity=60);
    /* CSS3 standard */
    opacity:0.6;
    /* for Mozilla */
    -moz-opacity:0.6;
    margin: auto;
    }
    Last edited by AVdes; Jul 11, 2007 at 10:31. Reason: formating for readability
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com

  3. #3
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All Right! That did it. Thank you.
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •