ansaurus

Question

Answer 1

A:

Most people I've run across have never gotten a 100% height to work and honestly after all that effort, your website really won't look that much better.

Div elements almost never work when mixed together with table elements, they're just not compatible with each other. It's highly unlikely that you'll ever get a div element which is inside a table to work properly across all browser platforms. The div element is trying to take 100% of the defined height for the element which its contained within, which is the td element, which happens to not have a height defined. You could define a 100% height for the td element, but in some browsers that will stretch the page down however many extra pixels you have defined for the other td elements.

Response to comment: If I wasn't clear enough in my initial answer, what I'm trying to say is that it simply is NOT supported across all browsers. Whatever you do, there will be something somewhere that does not appear the same in all of the other browsers. The browser designers are not going to rewrite everything just to correct 100% height functionality.

If you really want it to work that badly, you will need to write your own applications to do it for you.

Like I said before, you're using a div element inside a td element. The td has an implied height that stretches it to fit the rest of the available space, but the div cannot take a 100% height of an implied height, because it doesn't know what that height is.

animuson 2010-01-08 09:50:42

skrat 2010-01-08 11:08:43

Evidently you didn't understand all of what I was trying to say, so I added an extended response for you.

animuson 2010-01-08 20:10:58

Answer 2

A:

I'm not sure I understand why you need to use a table. If your goal is simply to create a layout that always spans the entire height of the browser window when the content in the middle is small and adjusts vertically when the content increases, then CSS is all you need.

<html>

<head>
<style>

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   height:100%; /* Necessary for IE 
   position:relative;
   background-color: red; /* Set equal to background-color of #body. This creates the illusion that your middle content spans the entire height of the page */
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
   background-color: red; /* Set equal to background-color of #container */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

</style>
</head>

<body>

<div id ="container">
    <div id="header"></div>
    <div id="body">
    This is resizable.
    </div>
    <div id="footer"></div>
</div>

</body>

</html>

Refer to this guide for how to do it (all I did was edit the background colors of the container and body divs to create the illusion that the middle content spans 100% height. adjust the css width, etc... to fit your layout).

George 2010-01-17 15:36:54

ansaurus

tags:

views:

answers:

Scrolling Cell in a 100% height TABLE

related questions