我有一个基于表格的布局，高度/宽度为 100%，没有滚动条。标题（红色）自动扩展以适应内容，但我不知道它会有多少像素。下面的流体表准确地给出了我的内容。
<html>
<body height=100%>
<table height=100% width=100% padding=0>
<tr height=1><td colspan=2 bgcolor=red>Fit<br/>to<br/>content<br/>height</td></tr>
<tr><td bgcolor=blue width=66% valign=top>How can I do this with CSS?</td><td bgcolor=green valign=top>
<div style="height:100%; width:100%; overflow:auto;">
This area can have content that overflows - needs an independent scrollbar.<br/>
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>
</div>
</td></tr>
</table>
</body>
</html>
如何在 CSS 中进行相同的布局并使其在常用浏览器上运行？
标题不应该太难，对于两列，我认为您需要使用人造柱 http://www.alistapart.com/articles/fauxcolumns/使颜色一直延伸到底部。
对于标题，我想你只需要：
HTML:
<div id="header">Fit<br/>to<br/>content<br/>height</div>
CSS:
#header {
background-color: red;
width: 100%;
}
附注你刚刚让我的眼睛流血了；）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
