Question

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

实施例： http://enstar.nl/example.php（此示例目前可能不可见，名称服务器应该已更改，但我的主机更新速度并不快。今天晚些时候应该工作。我为此带来的不便表示歉意）

所有方法都需要标题和/或页脚。我不希望这样。

我想要的是以下内容：

纯CSS，没有表格 2列，固定流体（按此顺序）如果内容未到达视口底部，则将列扩展到视口。其他程度的内容（如粘性页脚）

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>

Answer 1

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

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

只要rightCol中的文本比左侧col中的文本长（可以通过元素上的最小高度处理），那么缩放时不应该有任何问题。

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

两根柱子，固定流体，高度100％

1 个答案: