2列，固定流体，100％高度 [英] 2 columns, fixed fluid with 100% height

问题描述

我浪费了几个小时试图找出这一点。如何在不使用表的情况下实现以下效果？

示例：
http://enstar.nl/example.php （此示例可能不是可见的，名称服务器应该已经更改，但我的托管不是那么快更新它们，应该今天晚些时候工作）。

所有方法都需要一个标题和/或一个页脚。我不想这样。

我想要的是以下内容：

纯CSS， b $ b 2列，固定流体（以此顺序）
如果内容没有到达视口的底部，则将列扩展到它。其他内容的程度（如同一个粘性页脚）

一个100％x100％的表格是自然的。但我真的不想用这个表。

任何想法？

/ p>

当前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里面的文本比左边col由一个min-height元素），那么你不应该有任何问题，它缩放。

这也使得Javascript无需设置第二个宽度。原因是它设置为父div的宽度，默认情况下是100％，因为您的红色列余额200px它滑动显示部分，所以你可以看到你的左栏。

I've wasted hours trying to figure this out. 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.

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