Solved

Auto resize height

Posted on 2004-09-27
2
2,136 Views
Last Modified: 2008-03-04
I am trying to find a way to have a block's height to equal the parent's height

the CSS FILE,  for the menu part,  i added bottom:0; height:100%;  i thought that this will enable the menu block to stretch along with the page block.
the content block is the one that have the content that push down the page block. i want menu block to go along with it even though it doesnt have content.
Is there a way to do this?  I am lousy in explaining it in technical term, i hope this is clear, please let me know if its not clear


Heres an example

CSS FILE

#page{
      /* Colors */
                        
      /* Element Control */                  
      width:800px;
      margin-bottom:30px;            
      margin-right:auto;
      margin-left:auto;      
}

#content{      
      /* Element Control */
      float:right;      
      width:74%;      
}

#menu{      
      /* Element Positioning */
      top:0;            
      bottom:0;
            
      /* Element Control */                              
      width:25%;      
      height:100%;
      margin-right:1%;                                    
}



HTML FILE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />      
      <link rel="stylesheet" type="text/css" href="template.css">
      <title> Tour  Zurich! </title>
</head>

<body>      
      <div id=page>
            <div id=content>
                  <table width="100%">
                        <tr>
                    <td width="50%" bgcolor="#C6E2FF">
                      <div>random data</div>
                    </td>
                    <td width="50%" colspan=2 bgcolor="#C5FFC5">
                      <div>random data</div>
                    </td>
                       </tr>
            
                  <tr>
                    <td height="200" bgcolor="#E8F4FF" valign:"top">
                      <img src="images/z3.jpg" alt="DATA" />
                      <ul>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                      </ul>
                    </td>
                    <td colspan=2 bgcolor="#E7FFE7" valign:"top">
                      <img src="images/z2.jpg" alt="DATA" />
                      <ul>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                      </ul>
                    </td>
                       </tr>
            
                  <tr>
                    <td bgcolor="#C5FFC5">
                      <div>Accomodations</div>
                    </td>
                    <td colspan=2 bgcolor="#C6E2FF">
                        <li>random data</li>
                    </td>
                       </tr>
            
                  <tr>
                    <td height="200" bgcolor="#E7FFE7" valign:"top">
                      <img src="images/z4.jpg" alt="data" />
                      <ul>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                      </ul>
                    </td>
                    <td colspan=2 height="200" bgcolor="#E8F4FF">
                      <img src="images/z1.jpg" alt="DATA" />
                      <ul>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                      </ul>
                    </td>
                       </tr>
                  </table>
            </div>
            <div id=menu>
                  MENU                  
            </div>                  
      </div>            
</body>
</html>
0
Comment
Question by:BuggyLogic
2 Comments
 
LVL 11

Accepted Solution

by:
neester earned 50 total points
ID: 12167011
I dont think it can be done under normal implementation...
but here are some links that might offer you some help:


http://www.webmasterworld.com/forum83/200.htm
http://www.quirksmode.org/css/100percheight.html


they should offer some assistance.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS Columns on Slider Mobile 4 51
modify h2 4 89
Put glyphicon in my input button 4 30
Change color of modular 8 23
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

863 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

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now