Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > ASP General > 100% height of a div inside a TD

Reply
Thread Tools

100% height of a div inside a TD

 
 
Lamberti Fabrizio
Guest
Posts: n/a
 
      08-28-2005
I've got the problem described in the table above.

I've put a div red with some text inside a TD, but its height is less than 100% of TD height as you can see.

I've defined the following styles:

div.test { background-color:red; height:100%; width: 100%; }
table.test { border: 1px solid #CCCCCC; background-color:yellow; }
td.test { border: 1px solid #CCCCCC; }

does anyone know a solution ?

Please help me.

Regards to all

2
2b 1
4 5
7 8

 
Reply With Quote
 
 
 
 
McKirahan
Guest
Posts: n/a
 
      08-28-2005

"Lamberti Fabrizio" <(E-Mail Removed)._cut_off> wrote in message newsIfQe.111047$(E-Mail Removed)...
I've got the problem described in the table above.

I've put a div red with some text inside a TD, but its height is less than 100% of TD height as you can see.

I've defined the following styles:

div.test { background-color:red; height:100%; width: 100%; }
table.test { border: 1px solid #CCCCCC; background-color:yellow; }
td.test { border: 1px solid #CCCCCC; }

does anyone know a solution ?

Please help me.

Regards to all

2
2b 1
4 5
7 8


Change
<TD class=test><DIV class=test>1</DIV></TD>
to
<TD class=test><DIV class=test>1<br>&nbsp;</DIV></TD>

 
Reply With Quote
 
 
 
 
Lamberti Fabrizio
Guest
Posts: n/a
 
      08-28-2005
I can't use your solution, because the table is compiled runtime and so I can't know before the maximum lenght of 1 td for setting the correct width style.
"McKirahan" <(E-Mail Removed)> wrote in message news:(E-Mail Removed)...

"Lamberti Fabrizio" <(E-Mail Removed)._cut_off> wrote in message newsIfQe.111047$(E-Mail Removed)...
I've got the problem described in the table above.

I've put a div red with some text inside a TD, but its height is less than 100% of TD height as you can see.

I've defined the following styles:

div.test { background-color:red; height:100%; width: 100%; }
table.test { border: 1px solid #CCCCCC; background-color:yellow; }
td.test { border: 1px solid #CCCCCC; }

does anyone know a solution ?

Please help me.

Regards to all

2
2b 1
4 5
7 8


Change
<TD class=test><DIV class=test>1</DIV></TD>
to
<TD class=test><DIV class=test>1<br>&nbsp;</DIV></TD>

 
Reply With Quote
 
Dave Anderson
Guest
Posts: n/a
 
      08-29-2005
Lamberti Fabrizio wrote:
> I've got the problem described in the table above.
>
> I've put a div red with some text inside a TD, but its height is less
> than 100% of TD height as you can see.
>
> I've defined the following styles:
>
> div.test { background-color:red; height:100%; width: 100%; }
> table.test { border: 1px solid #CCCCCC; background-color:yellow; }
> td.test { border: 1px solid #CCCCCC; }
>
> does anyone know a solution ?


I would start by fixing your validation problems, especially the improper
nesting ones:

line 8 column 24 - Warning: missing </font> before <div>
line 8 column 7 - Warning: missing </font> before <div>
line 10 column 1 - Warning: inserting implicit <font>
line 10 column 1 - Warning: inserting implicit <font>
line 10 column 1 - Warning: missing </font> before <style>
line 10 column 1 - Warning: <style> isn't allowed in <font> elements
line 40 column 1 - Warning: <style> isn't allowed in <div> elements
line 40 column 1 - Warning: <style> isn't allowed in <div> elements
line 94 column 53 - Warning: discarding unexpected </font>
line 94 column 60 - Warning: discarding unexpected </font>
line 3 column 7 - Warning: inserting missing 'title' element
line 6 column 1 - Warning: <style> inserting "type" attribute
line 10 column 1 - Warning: <style> inserting "type" attribute
line 41 column 1 - Warning: <style> inserting "type" attribute
line 62 column 1 - Warning: <style> inserting "type" attribute
line 6 column 1 - Warning: trimming empty <style>
line 8 column 24 - Warning: trimming empty <font>
line 8 column 7 - Warning: trimming empty <font>

Then get all of the garbage out. You don't need three instances of the same
style rules. When all is said and done, there is a simple solution. Here is
a complete document that does what you want (and validates):



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
table {
width: 300px;
border-collapse: collapse;
border: 1px solid #ccc;
background-color: #ff0;
}
td {
border: 1px solid #ccc;
height: 100%;
}
td div {
background-color: #f00;
height: 100%;
}
</style>
</head>
<body>
<table>
<tr><td>2<br>2b</td>
<td><div>1</div></td></tr>
<tr><td>4</td>
<td>5</td></tr>
<tr><td>7</td>
<td>8</td></tr>
</table>
</body>
</html>



--
Dave Anderson

Unsolicited commercial email will be read at a cost of $500 per message. Use
of this email address implies consent to these terms. Please do not contact
me directly or ask me to contact you directly for assistance. If your
question is worth asking, it's worth posting.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Tetration (print 100^100^100^100^100^100^100^100^100^100^100^100^100^100) jononanon@googlemail.com C Programming 5 04-25-2012 08:49 PM
Nested Div. Height:100%. Does more than 100% celineusa@gmail.com HTML 8 12-09-2005 08:57 AM
100% height of a div inside a TD Lamberti Fabrizio HTML 8 08-29-2005 12:05 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM
100% TABLE + 100% ROW + 100% DIV..? fred Javascript 3 03-17-2005 04:25 AM



Advertisments