Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    XHTML strict, divs 100% height

    how to make those divs stretch 100% in height?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>My page title</title>
    </head>
    <body>

    <div style="width:600px; height:150px; background-color:red;">TOP</div>
    <div style="width:600px; background-color:yellow;">MIDDLE</div>
    <div style="width:600px; height:20px; background-color:blue;">BOTTOM</div>

    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Oct 2009
    Location
    Florida
    Posts
    155
    Thanks
    16
    Thanked 2 Times in 2 Posts
    Hello,

    just as a suggestion, you might want to add the colors and styles to a css file so you could use it throughout your site (if you want it to show more than once) instead of having to code each one.

    What exactly are you trying to accomplish? All I see here are three different sized and color boxes.

    Anyway,
    changing this:
    Code:
    width:600px; height:150px;
    to this:
    Code:
    width:600px; height:100%;
    will have the box automatically adjust to the height depending on the amount of content.

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello,

    I would like to have three divs (top, middle and bottom) that are 100% in height of browser window.

    Top and bottom divs are set to 150 and 20px.

    height:100%; is not working
    Last edited by inet1; 08-21-2010 at 08:14 PM.

  • #4
    Regular Coder
    Join Date
    Oct 2009
    Location
    Florida
    Posts
    155
    Thanks
    16
    Thanked 2 Times in 2 Posts
    So you want to have three divs cover the entire browser page? I'm confused by the part "100% in height of browser window"?

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by The reaper View Post
    So you want to have three divs cover the entire browser page?
    Exactly.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You'd need to use faux columns, see http://www.alistapart.com/articles/fauxcolumns/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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