0

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

示例： 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>
4

1 回答 1

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 中的文本比 left col 中的文本长（可以通过元素上的最小高度来处理），那么缩放就不会有任何问题。

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

于 2011-10-24T13:38:43.667 回答