SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast steiger's Avatar
    Join Date
    Jun 2001
    Location
    London
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIV Height = 100%

    Iv made a DIV with height 100%, but it only extends to 100% of the actual browser size. But if the content is more than a page, it cuts off. How can I make it the height of the PAGE?

    Thanks in advance...
    www.steigerdesign.com
    Bless your FRGL. LTTL. MNDS.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't think you can reliably set 100% height cross browser. IE6 will take 100% height as window height but will expand to document height if larger.

    Mozilla will take html,body {100% height} to be viewport height and content will overflow if larger.

    If you just want a background colour to extend with the content then you could use an inner div for mozilla with the same background color. The background will then appear to expand with the document. However it will only work for certain situations in Mozilla as content placed after the divs will be placed at 100% viewport height.

    Or you could do the same as above but float a column.
    Code:
    <!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>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html,body {height:100%;margin:0;padding:0;background:blue}
    .outer {height:95%;width:300px;background:red;}
    .outer p{margin:0}
    .inner {background:red;width:100%;float:left;}
    .footer {background:green;clear:both;height:5%}
    </style>
    </head>
    <body>
    <div class="outer">
      <div class="inner">
    	<p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
    	<p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
    	<p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
    	<p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
    	<p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
    </div>
    </div>
    <div class="footer">Footer</div>
    </body>
    </html>
    However I think this is of limited use but you may be able to use something .

    Paul

  3. #3
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I just figured this one out.

    It can be done!!

    http://www.sitepointforums.com/showt...tpost&t=138405

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hmmm,

    My code seems to do the same as that unless I'm mistaken

    Paul

  5. #5
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Noooo, you spoiled my fun.

  6. #6
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But, ah, your footer is certain percentage of the height. Can you make it fixed height? Also I'd like to see a fixed height footer.

    I'd be intereted to see it done, as mine has a fix for browser issues, and thats no fun.

    (that was a part of my original problem)

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Easy to add a fixed footer just change these two lines in my above code:
    Code:
    .outer {height:100%;width:300px;background:red;margin-bottom:-50px;}
    .footer {background:green;clear:both;height:50px;}
    I haven't really tested it properly but i've tried it in OPera7, IE6 and Mozilla and it seems to work ok but I wouldn't be surprised if it doesn't fall apart somewhere .

    Your code seems to work ok (except in OPera7 as you mentioned).

    Paul

    Edit:

    mine doesn't work in Opera 7 with the fixed height footer

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here's the footer with a fixed height but this is getting pretty ugly now. It works in Mozilla 1.2, IE6 and Opera7 (all PC as i'm sure macs won't like it).

    Code:
    <!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>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    html,body {height:100%;margin:0;padding:0;background:blue}
    .outer {height:100%;width:300px;background:red;margin-bottom:-50px;}
    .outer p{margin:0}
    .inner {background:red;width:100%;float:left;}
    .footer {background:green;clear:both;height:50px;}
    #clear {display:none}
    *html #clear {display:block;height:50px;}/*IE needs this only */
    html*#operahide {display:none}/*hide from opera */
    </style>
    </head>
    <body>
    <div class="outer">
      <div class="inner">
    	<p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
    	<p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
    	<p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
    	<p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
    	<p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
     <div id="clear"></div>
    </div>
    </div>
    <br id="operahide" style="clear:both" />
    <div class="footer">Footer</div>
    </body>
    </html>
    Anyway it might be of some use to someone.

    Paul

  9. #9
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, in my ie5.0 and opera the height is off a bit, too high.

    And you're having more and more hacks.

    I'ts intereting to see other solutions.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    And you're having more and more hacks.
    Yes I agree

    It works in Opera7 though (where yours didn't)

    The original with percentage was quite neat (no hacks) but the fixed height footer does cause problems.

    I'ts intereting to see other solutions.
    Yes it's good to try things out for yourself, it's the best way to learn what works and what doesn't.

    Paul


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
  •