Thu, 2005-12-29 14:31
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 
Thu, 2005-12-29 15:30
#1
100% Height in CSS
Maybe you should try this:
html, body {
height:100%;
} But I'm not sure, I'm kinda new to CSS.
Thu, 2005-12-29 15:51
#2
100% Height in CSS
hmmm, that didn't work for me. but thanks!
Thu, 2005-12-29 16:55
#3
100% Height in CSS
Show a link that demonstrates your problem.
Fri, 2005-12-30 07:46
#4
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? 
Fri, 2005-12-30 10:08
#5
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.
Fri, 2005-12-30 13:10
#6
100% Height in CSS
Hugo wrote:
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.