桌子高度：100% 不适用于 chrome、safari、opera答案

【问题标题】：Table height:100% not working in chrome, safari, opera桌子高度：100% 不适用于 chrome、safari、opera
【发布时间】：2013-05-01 09:38:46
【问题描述】：

我编写了以下设计代码

CSS

#content1{
top:0;
width: 300px;
height: 250px;

}

#content2{
width: 300px;
height: 250px;

}

#content3{
width: 300px;
height: 250px;

}

#bottom{
width: 300px;
height: 75px;

}

代码

<td width="300" valign="top" style="height:100%;">


      <table border="0" align="center" cellpadding="0" cellspacing="0"  height="100%">
       <tr>  
        <td valign="top">
         <div id="content1>/*****Content1****/</div>
        </td>
       </tr>
       <tr>
        <td valign="middle">
         <div id="content2/*****Content2****/</div>
        </td>
      </tr>
      <tr>
       <td valign="middle">
        <div id="content3/*****Content3****/</div>
       </td>
      </tr>
      <tr>
       <td valign="bottom">
        <div id="bottom/*****Content4****/</div>
       </td>
     </tr>
    </table>

 </td>

你可以在这里看到这个工作 http://www.spoiledagent.com/about_karu1.html

它运行良好，因为我希望它在浏览器 IE 和 Mozilla 上具有相同的边距，但在任何其他浏览器（如 Safari、Chrome 等）中看起来并不好。所有块看起来都粘在一起。

我们如何让它在所有浏览器上看起来都像在 IE 上一样

谢谢

【问题讨论】：

您可以将它们置于
的情况下，并在 li 上给它们一个 margin-top。
最好不要使用表格来布置页面。这被认为是不好的做法，并且可能会导致问题。
你试过我的小提琴吗？

标签： html google-chrome safari mozilla

【解决方案1】：

给你的表一个 id 并使用这个 css。

#tableid
{
border-collapse:separate;
border-spacing:0 20px;
}

检查此fiddle
欲了解更多信息，请阅读this

【讨论】：

还是不行，在firefox和IE下都可以，其他浏览器不行

【解决方案2】：

你为什么不把它们放到一个列表中?

这里有一点Fiddle 给你

【讨论】：