当前位置：文江博客话题详情

两列，100%高度固定流体

发布于 2024-12-11 17:44:42 字数 718 浏览 0 评论 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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长途伴 2024-12-18 17:44:42

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

<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 中的文本长（可以通过元素上的 min-height 来处理）那么你应该不会遇到任何缩放问题。

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

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.

回复收藏 0 原文

~没有更多了~