Solved

CSS - set table height to 100% in order to fill it's containing element

Posted on 2009-04-01
5
425 Views
Last Modified: 2012-05-06
I have a table that sits inside of a div tag of variable height.  I need the table to expand vertically to fit the div at whatever size it is.  I of course tried to give it a css style of height:100%, which works perfectly on a table element in IE7, but it doesn't seem to work in any of the other browsers.  Anybody have any tricks up their sleeves?
0
Comment
Question by:josephdaviskcrm
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 23

Expert Comment

by:apresto
ID: 24040679
can you post the code (simplified if poss) of the div and table so we can play with it?
0
 

Author Comment

by:josephdaviskcrm
ID: 24040731
just create a div and add a style to it with css of a set height, like 200px or something.  Give it a background-color so you can see the space it covers.  Then stick a table inside of it with one row and one cell.  Give it also a background color so you can see the space it covers.  Now try and make the table expand vertically to fill the whole container div.  Horizontal coverage is not important.
0
 
LVL 11

Expert Comment

by:level9wizard
ID: 24040787
If you haven't declared a doctype:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

or validated your code:
http://validator.w3.org/

... then our more than likely going to see different results in various browsers. After you do these two things, you should be able to simply do this:

<!-- in html -->
<div id="myDiv"> content here... </div>

/* and in css */
#myDiv
{
   display: block;
}
0
 

Author Comment

by:josephdaviskcrm
ID: 24040863
I don't think that's really what I'm going for...

I'm using a table because it has a valign property and I need the content of this area on my homepage to be centered vertically.

So I stuck this table into the div, gave the table a css style of 100% and stuck my content inside the table (which has 1 row and 1 cell).  Once again, this works perfectly in IE7, but no in any other browser.
0
 
LVL 18

Accepted Solution

by:
Morcalavin earned 500 total points
ID: 24040899
Try this.  The 10px pixel padding was added just to show that the table is inside the div.

<!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> 
<title>Please Help!</title> 
<style type="text/css">
html, body {
    padding: 0px;
    maring: 0px;
    height: 100%;
    border: 0px;
}
#div {
    height: 300px;
    background-color: blue;
    padding: 10px;
}
#table {
    background-color: green;
    width: 100%;
    height: 100%;
}
</style>
</head> 
<body>
<div id="div">
<table id="table"><tr><td>Test</td></tr></table>
</div>
</body> 
</html>

Open in new window

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question