将表格布局迁移到 div 布局问题答案

【问题标题】：Migrate table layout to div layout issue将表格布局迁移到 div 布局问题
【发布时间】：2013-07-04 13:23:24
【问题描述】：

当前我的布局使用表格，但在 Opera 和 IE 中，所有 td 高度 100% 都不起作用。

在 Firefox/Chrome 中如下图所示：

html结构

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td style="height:32px;"></td>
                </tr>
            </table>
        </td>
        <td style="width:64px"></td>
    </tr>
<table>

那么我怎样才能把它变成 div 呢？

我在 Google 上尝试设置第一个 div 绝对位置和高度 32px，然后把它放在底部 0，第二个 div 设置它的高度 100% 绝对位置和 top:0 bottom:32px，但根本不像图片那样工作。

谁能教我如何从表格迁移布局？

更新

我在某些页面中的 php 脚本会动态添加一个顶栏。

当前布局：

<div id="leftside">
    <div id="topbar"></div>

    <div id="php-generated-content">
      <div id="autofill"></div>
      <div id="bottombar"></div>
    </div>
</div>
<div id="rightside">
    <div id="right-menu"></div>
</div>

和图片一样，但是在顶部增加了一个 height:32px 顶栏然后绿色部分在顶部和底部栏之间自动填充。

【问题讨论】：

标签： html css html-table

【解决方案1】：

试试这个

css

body, html{
    height:100%;    
}
.leftPan{
    width:80%;
    background-color:#066;
    height:100%;
    float:left;
    position:relative;
}
.rightPan{
    height:100%;
    width:20%;
    background-color:#09F;
    float:right;
}
.footer{
    position:absolute;
    height:32px;
    bottom:0;
    left:0;
    width:100%;
    background-color:#963;
}

html

<div class="leftPan">
    Left Panel
    <div class="footer">Footer</div>
</div>
<div class="rightPan">
    Rigt Panel
</div>

jsFiddle File

【讨论】：

感谢您的回复！我还有一个问题，请查看我更新的问题

【解决方案2】：

这取决于你想要什么样的滚动行为。拥有永久的屏幕面板和滚动的主面板非常简单：

<html>
<head>
<style type="text/css">
body { padding:0 64px 32px 0; }
.right-col { background:red; width:64px; height:100%; position:fixed; right:0; top:0 }
.footer { background:green; height:32px; position:fixed; left:0; right:64px; bottom:0 }
</style>
</head>
<body>
[content]
<div class="right-col"></div>
<div class="footer"></div>
</body>
</head>

如果您希望页脚根据主要区域的高度移动（不超过屏幕底部），那就更难了。我见过的唯一好的解决方案涉及 JavaScript。

【讨论】：