Skip to content Skip to sidebar Skip to footer

Height = 100% Doesn't Seem To Work For Table

I'm trying to have my table use 100% of the height. This fiddle shows the problem. 100% of the width is used (try resizing the width to see this). However, the pictures stay clutte

Solution 1:

You would think, that height:100% means that it will use all available space, however in reality, it simply means that the element has the same height as the container. Subsequently, a parent element with no fixed height, has the same height as it's content.

In your case, the table has no parent element, except for the DOM. The DOM has no set height, so it's height is the same as it's content. As your table has no fixed height, it goes one level deeper, and looks at the table content, which has a minimum height 600px. And thus, the height of the DOM (and your table) is only 600px.

Wrap the table in a container with a fixed height, or set the height of the document to 100%. That should do the trick.

Solution 2:

Try this:

html, body 
{
  margin:0;
  padding:0;
  height:100%;
  border:none
}

Solution 3:

I've noticed that the attribute HEIGHT="100%" doesn't work when this declaration is inserted:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

but it does work like this:

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

Hope this helps

Post a Comment for "Height = 100% Doesn't Seem To Work For Table"