如何将基于表格的布局转换为CSS?

问题描述：

我有一个基于表格的布局，高度/宽度为100％，没有滚动条.标头(红色)会自动扩展以适合内容，并且我不知道它将有多少像素.下面的流体表给出了我到底是什么.

I have a table based layout which is 100% height/width with no scrollbars. The header (red) automatically expands to fit the content and I don't know how many pixels it will be. The fluid table below gives exactly what I what.

<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中进行相同的布局并使之在常用的浏览器上正常工作?

How can I do the same layout in CSS and have it work on commonly used browsers?

答

标题应该不会太难，对于这两列，我认为您需要使用

The header shouldn't be too difficult, for the two columns, I think you'll need to use faux columns to make the colours stretch all the way to the bottom.

对于标题，我想你只是想要:

For the header I think you'll just want:

HTML:

<div id="header">Fit<br/>to<br/>content<br/>height</div>

CSS:

#header {
    background-color: red;
    width: 100%;
}

p.s.你只是让我的眼睛流血;)

p.s. You just made my eyes bleed ;)

如何将基于表格的布局转换为CSS?

相关推荐