Two columns, fixed fluid with 100% height

问题:

How can I achieve the following effect without the use of a table?

Example: http://enstar.nl/example.php (The example may not be visible at the moment, the nameservers should have been changed, but my hosting isn't that fast in updating them. Should be working later today. I apologize for the inconvenience)

All methods require a header and/or a footer. I don't want that.

What I want is the following:

Pure CSS, no tables 2 columns, fixed fluid (in that order) if the content hasn't reach the bottom of the viewport, than extend the columns to it. Else extent to the content (so like a sticky footer)

A table at 100%x100% does this naturally. But I really don't want to use a table for this.

Any ideas?

EDIT:

Current HTML

<table width="100%" height="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td id="navigation" valign="top" align="left">
        </td>
        <td id="content" valign="top" align="left">
        </td>
    </tr>
</table>

回答1:

to set a two column there are a couple of options if you don't want to use tables

<div id="wrapper" style="height: 100%;">
    <div style="background-color: green;">
        <div id="leftCol" style="float: left; width: 200px;">testing</div>
        <div style="background-color: red; margin-left: 200px;">
            <div id="rightCol" style="height: 900px;" >testing testing testing testing testing testing testing</div>
        </div>
    <div class="clear"></div>
    </div>
</div>

As long as the text inside the rightCol is longer than that in the left col (which can be handled by a min-height on the element) then you shouldn't have any problems with it scaling.

This also nullifies the need for the Javascript to set the second width. The reason is it is set to the width of the parent div which by default is 100% since you margin the red column left 200px it slides the display section over so you can see your left column.