SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Norway
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making elements fill height

    Hi, I'm building a interface for a web application in HTML. Several places in this application I need elements that fill vertical spaces inside divs.

    I've made an example here: http://www.webscape.no/ole/1.html

    The example contains three div elements. The outer element with a black border has a fixed height of 600px. The first inner element which is blue has a fixed height of 30px.

    My question is: how do I make the second inner element (red) strech to fill the remaining space inside the outer element with a black border?

    (I do not want to specify the height manually, as the height of the outer element and the red element will vary from page to page)

    Thanks !!

    Here is the HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>Test</title>
    <style type="text/css">
    .outerBox{border:5px solid black;height:600px;}
    .innerBox1{background-color:blue;height:30px;}
    .innerBox2{background-color:red; height:100%;}
    </style>
    </head>
    <body>
    <div class="outerBox">
    <div class="innerBox1"></div>
    <div class="innerBox2"></div>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Addict Jamieharrop's Avatar
    Join Date
    Mar 2005
    Location
    West Yorkshire, UK
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks to me like you have already done it. In IE the red area fills all the space in the black box, under the blue bar. There is a bug in Opera where it over laps.

    The correct way to do this would be to use a repeating red 1x1px background image in .outerBox. Don't specify a height for innerBox2. Just let the box expand as the content needs, and then any left over space will be filled with the red background image.
    Regards,
    Jamie Harrop

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Norway
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I've set the red to 100% so it fills the box, but it overshoots. This example is a simplification of the actual interface design. In the actual interface the red box contains a list with misc. buttons etc. so I cannot use a background image.

    thanks for the reply!

    Vidar


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
  •