Taking up 100% page height

**dmsuperman** · Sep 22, 2007, 17:25

I have developed a template that I like, and everything seems to work in both IE and firefox, except that I can't figure out how to make it stretch to take up the full height. http://75.185.5.253/portfolio/ is the location. {{{{HERE}}}} is the area I can't seem to stretch out, if anyone can figure it out or give me some pointers that would be great.

**krt** · Sep 22, 2007, 17:35

The height is relative to the parent element. If you want 100% height, the page has to be 100% too, like so:

Code:

body, html {
  height: 100%;
  overflow: hidden;
}

BTW, did you want 100% of the viewport to be the minimum height?

**Pepper** · Sep 22, 2007, 19:59

Originally Posted by krt

The height is relative to the parent element. If you want 100% height, the page has to be 100% too, like so:

Code:

body, html {
  height: 100%;
  overflow: hidden;
}

BTW, did you want 100% of the viewport to be the minimum height?

I would'nt use overflow: hidden here. This would disable the scrollbars on the page.

krt is right though, set body and html to height 100% as well as any other parent elements.

**dmsuperman** · Sep 23, 2007, 07:02

It's already set to 100% height for both, if you take a look in portfolio.css.

This does basically nothing in FF, and in IE 6 it extends it beyond a single page scroll.I just want to ensure that my footer always gets pushed to the bottom of the page. If I have enough content it looks great, but when I don't have that much content it doesn't extend

**Pepper** · Sep 23, 2007, 08:37

Change

#outer {
min-height: 100%;
}

to

#outer {
height: 100%;
}

That should do it ^_^

**dmsuperman** · Sep 23, 2007, 10:42

In firefox, yes, in IE, it extends it beyond a single page-scroll. Any idea how to fix it in IE?

**Paul O'B** · Sep 24, 2007, 02:15

Hi,

Well as you are using the old method of tables for layout then I guess Ie6 would probably like the old doctype also.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

That will fix the page straight away but leave you in quirks mode which is not advisable.

If you want to move away from tables then the FAQ on 100% height (and the one on putting a footer at the bottom) explains how to do this without using tables. There are also examples in the 3 col sticky thread at the top of the forum.

If you must use tables then the only way I know of doing something like this in IE6 in standards mode is to use the same method that I used for the footer technique and relies on having a fixed height header and footer.

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}

html, body {height:100%;}
body {font-family:arial, helvetica, sans-serif;}

#header {
    background:green;
    height:100px;
    position:relative;
    z-index:999;
    text-align:center;
    border-bottom:1px solid #000;
}
#outer {
    border-collapse:collapse;
    table-layout:fixed;
    width:100%;
    height:100%;
    margin:-101px 0 -61px;
    padding:0;
}

#outer td {
    padding:101px 8px 61px;
    vertical-align:top;
}

#outer .left {
    width:100px;
    background-color:red;
    border-right:1px solid #000;
}

#outer .center {
    background:#cdc;
}

#outer .right {
    width:100px;
    background:red;
    border-left:1px solid #000;
}

#footer {
    border-top:1px solid #000;
    background:green;
    color:#ff;
    height:60px;
    text-align:center;
}

</style>
</head>
<body>
<div id="header">Header</div>
<table id="outer">
    <tr>
        <td class="left">Left</td>
        <td class="center">Centre</td>
        <td class="right"> Right</td>
    </tr>
</table>
<div id="footer">Footer</div>
</body>
</html>

However its a long time since I've played around with tables so there may be other ways of doing this

**dmsuperman** · Sep 24, 2007, 05:45

I keep having issues with tables, so I guess it's off to the intarwebs to find out how to do it with all CSS then

Shame, took so long just to get it to work almost right in both IE and Firefox.

**dmsuperman** · Sep 24, 2007, 13:36

Alright, so check this out:
http://75.185.5.253/portfolio_rework/css.html

Almost got it right, except I can't get the gray background with green border to extend with the rest of the content. Any ideas?

EDIT: I mean to have it extend without needing content, similar to my initial problem.

**Paul O'B** · Sep 24, 2007, 15:17

Hi,

You could use a left repeating y image on the body and a right repeating image on #outer to give you your right and left full length borders.

Your also need to control the content from running over the footer (see faq on putting a footer at the bottom).

If you want three actual columns then its probably easier if you follow my instructions which explain all aspects of this:

http://www.pmob.co.uk/temp/3colfixedtest_4.htm

**dmsuperman** · Sep 24, 2007, 16:07

I can't have it repeat y because the image is a repeat x one. I got the content over running the footer fixed, now just to figure out how to make the gray box extend all the way down.

**dmsuperman** · Sep 25, 2007, 12:28

I just removed that background image and I made a different one. I used the background on #outer for the left one, then put a floating bar for the right one. It now looks almost the exact same in all of the following: Firefox 2.0.0.7, IE 5.55, IE6, and IE7. In IE5.0 the PNG transparency hack doesn't work, and in both 5.5 and 5.0 there's a small gap either above or below the right border, but overall I'm very happy. Thanks for all your help guys, not only is it much cleaner but it has a smaller size thanks to your guidance. I appreciate all the help. Now to figure out how to test it on a Mac without actually using a Mac...

User Tag List

Thread: Taking up 100% page height

Thread Tools

Display

Taking up 100% page height

Bookmarks

Bookmarks

Posting Permissions