Hey all you CSS Gurus out there!
I have a table with a background image. That table should extend 100% height so the whole image displays, regardless of the content of that particular table. Right now the table extend to the point where the content ends. Here is a screen shot of what I am talking about:
As you can see, the background image does not extend 100% because the content on the left does not extend too far down the page.
I created a style (contentwrapper2) and tried to apply it to the table, but that did not seem to work. I also tried to apply a 100% height to different tables and <td>s in the HTML. That also did not work.
Here are my styles (the relevant styles are contentwrapper and contentwrapper2):
<style type="text/css"> <!-- .navheight { height:100%; min-height:100%; } .style4 { font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; } .style5 {font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; } .style6 { font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #06427C; font-weight: bold; } .style7 { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; } .style9 { font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; } .style11 {font-size: 16px} #contentwrapper { border-top:5px solid #084A94; padding-bottom: 0px; margin: 0 0 0 0; border-left: #fdfdfd 1px solid; padding-top: 0px; border-bottom: 5px solid #084A94 ; background-color: #fdfdfd; font-size: 12px; } #contentwrapper2 { padding-bottom: 0px; margin: 0 0 0 0; padding-top: 0px; height: 100%; width: 100%; } #sidebar { border-right: #efefef 1px solid; border-top: #efefef 0px solid; padding-bottom: 8px; padding-top: 10px; margin: 1px 0px -6px /*570px*/; width: 175px; color: #bbb; background-color: #ECECFF; voice-family: inherit; margin-bottom: 5px; font-weight: bold; vertical-align: top; } --> </style>
This is the HTML:
<body> <div id="contentwrapper"> <table width="100%" height="80%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" bgcolor="#FFFFFF" class="content"> <table width="100%" border="0" cellpadding="0" cellspacing="0" gcolor="DFE3DF"> <tr> <td> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="34" colspan="3" background="images/stripbkgd.gif"> </td> </tr> <tr> <td width="260" height="79"><a href="index.html"><img src="images/logo.gif" width="251" height="79" border="0"></a></td> <td width="100%" background="images/headerbackground.gif" bgcolor="#084A94" height="79" > </td> <td align="right" height="79"><img src="images/capitol2.gif" width="239" height="79"></td> </tr> <tr> <td class="contentwrapper2" colspan="3" bgcolor="#FFFFFF" height="100%"> <!-- THIS TABLE SHOULD EXTEND 100% HEIGHT --> <table width="100%" height="100%" border="0" cellpadding="8" cellspacing="0" background="images/contentbkgd.gif"> <tr> <td width="200" valign="top"></td> <td width="100%" valign="top"> <span class="style6 style11">Frequently Asked Questions</span> <p class="style4"><a href="#">General Information </a></p> <p class="style4"><a href="#">Passwords, IDs and Logging In</A></p> <p class="style9"><a href="#">Applying for Jobs</A></p> <p class="style9"><a href="#">Inputting Resumes in GAO Careers</A></p> <p class="style9"><a href="#">Notifications</A></p> <p class="style9"><a href="#">The Rating Process</A></p> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table></td> <td class="sidebar" valign="top"> <div id="sidebar"> <ul class="nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </td> </tr> </table> </div> </body>
I seems like I have tried every variation of almost everything, using the contentwrapper2 style. I am pretty sure that this IS possible... but I could be wrong. I think I am having some sort of style conflicts somewhere. Any input would be appreciated, or maybe point me in the right direction.
Thanks for looking
100% Height in CSS
Maybe you should try this:
html, body { height:100%; }But I'm not sure, I'm kinda new to CSS.
100% Height in CSS
hmmm, that didn't work for me. but thanks!
100% Height in CSS
Show a link that demonstrates your problem.
100% Height in CSS
I see this is a forum where mods/admins just go around deleting peoples posts! What was wrong with my posts here in order for them to be deleted?
100% Height in CSS
If we get into a debate here we will de-rail the original thread.
If posts were deleted you should have been informed as to why , this is not a forum that goes around deleting threads without reason and their seldom is.
If posts were deleted would the Moderator who did so please acknowledge why.
Hugo /Mod.
100% Height in CSS
If posts were deleted would the Moderator who did so please acknowledge why.
http://www.csscreator.com/css-forum/sutra76706.html#76706
I thought it was quite clear.