6 replies [Last post]
drunkenmonkey79
Offline
Regular
Last seen: 14 years 33 weeks ago
Joined: 2005-03-17
Posts: 14
Points: 0

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">&nbsp;</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" >&nbsp;</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 Laughing out loud

pimm
Offline
newbie
Last seen: 15 years 16 weeks ago
Timezone: GMT+1
Joined: 2005-12-22
Posts: 4
Points: 0

100% Height in CSS

Maybe you should try this:

html, body {
	height:100%;
} 
But I'm not sure, I'm kinda new to CSS.

drunkenmonkey79
Offline
Regular
Last seen: 14 years 33 weeks ago
Joined: 2005-03-17
Posts: 14
Points: 0

100% Height in CSS

hmmm, that didn't work for me. but thanks!

Anonymous
Anonymous's picture
Guru

100% Height in CSS

Show a link that demonstrates your problem.

X33:Q
X33:Q's picture
Offline
newbie
Cape Town, South Africa
Last seen: 15 years 15 weeks ago
Cape Town, South Africa
Joined: 2005-12-29
Posts: 3
Points: 0

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? Evil

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anonymous
Anonymous's picture
Guru

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.