不使用表格如何实现下面的效果呢?
例子:http://enstar.nl/example.php http://enstar.nl/example.php(该示例目前可能不可见,名称服务器应该已更改,但我的主机更新它们的速度不是那么快。今天晚些时候应该可以工作。对于给您带来的不便,我深表歉意)
所有方法都需要页眉和/或页脚。我不想要这样。
我想要的是以下内容:
纯CSS,无表格
2 根柱,固定流体(按顺序)
如果内容尚未到达视口的底部,则将列扩展到视口的底部。内容的其他范围(就像粘性页脚)
100%x100% 的表格自然可以做到这一点。但我真的不想为此使用表格。
有任何想法吗?
EDIT:
当前 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>
要设置两列,如果您不想使用表格,有几个选项
<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,它会滑动显示部分,以便您可以看到左侧的列。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)