两列，固定液体，高度为100％ [英] Two columns, fixed fluid with 100% height

问题描述

如何在不使用表格的情况下实现以下效果？ 示例：
http://enstar.nl/example.php （这个例子可能暂时不可见，名称服务器应该已经被更改，但是我的主机不是'所有的方法都需要一个页眉和/或页脚。所有的方法都需要一个页眉和/或页脚。我不想那样。

我想要的是：

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

100％x 100％的表格自然会这样做。但我真的不想为此使用一个表。

有什么想法？

编辑：

当前HTML

 < table width =100％height =100％cellpadding =0cellspacing =0> 
< tr> 
< td id =navigationvalign =topalign =left> 
< / td> 
< td id =contentvalign =topalign =left> 
< / td> 
< / tr> 
< / table> 
  

解决方案

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

 < div id =wrapperstyle =height：100％; > 
< div style =background-color：green;> 
< div id =leftColstyle =float：left; width：200px;> testing< / div> 
< div style =background-color：red; margin-left：200px;> 
< div id =rightColstyle =height：900px; >测试测试测试测试测试测试测试< / div> 
< / div> 
< div class =clear>< / div> 
< / div> 
< / div> 
  

只要rightCol内的文字比左列中的文字长（可以处理通过元素的最小高度），那么你不应该有任何问题，它缩放。

这也会使Javascript无法设置第二个宽度。原因是它被设置为父div的宽度，默认为100％，因为您的边距红色列左边200px它滑动显示部分，因此您可以看到左边的列。

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>

解决方案

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.

这篇关于两列，固定液体，高度为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！