如何将此基于表格的布局转换为 CSS？答案

【问题标题】：How can I convert this table based layout to CSS?如何将此基于表格的布局转换为 CSS？
【发布时间】：2016-10-02 06:46:09
【问题描述】：

我有一个基于表格的布局，它是 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 中进行相同的布局并使其在常用浏览器上运行？

【问题讨论】：

我复制/粘贴了它，但在 Firefox 3.5 中我似乎没有做你想做的事。绿色的侧边栏应该有一个滚动条，而正文应该没有，对吧？
是的，应该。我还没有在这台机器上安装FF3.5。我需要这样做 - 谢谢你告诉我。

标签： html css layout css-tables

【解决方案1】：

标题应该不会太难，对于两列，我认为您需要使用faux columns 使颜色一直延伸到底部。

对于标题，我认为您只需要：

HTML：

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

CSS：

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

附言你让我的眼睛流血了；）

【讨论】：

这似乎回答了我提出的问题，但我不确定它是否完全符合我的需求。我将对其进行测试，要么接受它作为答案，要么改进问题。谢谢。

【解决方案2】：

<html>
<head>
<style type="text/css">
#wrapper
{
 height: 100%;
 width: 100%;
 padding: 0;
}

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

#main
{
 height: 100%;
 width: 100%;
 float: left;
}

#main-left
{
    height: 100%;
 float: left;
 width: 66%;
 background-color: blue;
}
#main-right
{
    height: 100%;
 float: left;
 width: 34%;
 background-color: green;
}
</style>
</head>
<body>

<div id="wrapper">

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

<div id="main">

  <div id="main-left">
    How can I do this with CSS?
   </div>

   <div id="main-right">
    Tested in Chrome 2 and IE8
   </div>

 </div>

</div>
</body>
</html>

【讨论】：

我在 IE8 和 Chrome2 中尝试了这个解决方案。两种浏览器都会在右侧产生一个滚动条。右侧或底部不应有滚动条。
我敢肯定，如果内容超出浏览器的可视区域，颜色将不会一直持续到内容的末尾，就会出现问题。
我在示例中添加了一些太大的内容，以显示我希望它在存在内容溢出问题的情况下如何工作。