Html 两个柱，100%高度的固定流体

如何在不使用表格的情况下实现以下效果

例如： （该示例目前可能不可见，名称服务器应已更改，但我的主机更新速度不是很快。今天晚些时候应该可以工作。对于由此带来的不便，我深表歉意）

所有方法都需要页眉和/或页脚。我不想那样

我想要的是：

纯CSS，没有表格 2列，固定流体（按该顺序） 如果内容尚未到达视口底部，请将列延伸到视口底部。Else扩展到内容（就像一个粘性页脚）

100%x100%的桌子自然可以做到这一点。但我真的不想用桌子来做这个

有什么想法吗

编辑：

当前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>

---

要设置两列，如果您不想使用表，有两个选项

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

测试
测试测试

只要右列中的文本比左列中的文本长（可以通过元素上的最小高度来处理），那么在缩放时就不会有任何问题

---

这也消除了Javascript设置第二个宽度的需要。原因是它被设置为父div的宽度，默认情况下是100%，因为您将红色列留到左边200px的空白处，它会将显示部分滑动到左边，以便您可以看到您的左边列。

如果我将body和html设置为100%；，那个似乎管用。但是我如何让它与固定的流体布局一起工作呢？如果我将列向左编辑为宽度：200px；，如何编辑列宽？看见（Hmmz，我看到我的命名服务器还没有改变，因此如果不将主机文件更改为新的IP，示例可能不可见。它们应该在几小时内工作。当内容超过第一页时会发生什么情况？@nightfox89是唯一真正的答案，当您想要一个固定列，然后左边是一个可变宽度时，您需要使用java脚本。请参阅edits@Jleagle我不知道你说的内容超过第一页时会发生什么是什么意思。你是说内容比宽度多还是说初始渲染还是什么？如果一列中的内容比视口高，会使一列比另一列高吗？