tags:

views:

211

answers:

1
Q: 

Can this be done without tables or JavaScript: 100% height wills remaining height of container

Is it possible to make a none table based layout that allows #bottom element to fill 100% of the remaining space left in the parent element without the use of JavaScript?

Here is what works when using tables:

<html>
    <head>
        <style>
            table{
                height: 100%;
                width: 100%;
            }

            #top{
                background-color: blue;
                height: 200px;
            }

            #bottom{
                background-color: red;
                height: 100%;
            }        
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr id="top">
                    <td></td>
                </tr>
                <tr id="bottom">
                    <td></td>
                </tr>            
            </tbody>            
        </table>
    </body>
</html>
+1  A:  
<html>
  <head>
    <style>
    * { padding: 0px; margin: 0px; }
    body {
      height: 100%;
    }
    #main {
      height: 100%;
      width: 100%;
      position: relative;
    }
    #top{
      background-color: blue;
      height: 200px;
    }
    #bottom{
      background-color: red;
      position: absolute;
      bottom: 0px;
      top: 200px;
      left: 0px;
      right: 0px;
    }               
    </style>
  </head>
  <body>
    <div id="main">
      <div id="top">
      </div>
      <div id="bottom">
      </div>
    </div>
    </body>
</html>

You don't really need #main, I just like to keep my stuff contained unnecessarily.

apphacker  2009-04-28 05:52:17

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?