Question

目前我的布局使用表格，但在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？

我用谷歌搜索设置第一个div位置绝对和高度32px，然后把它放在底部0，第二个div设置它的高度100％位置绝对和顶部：0底部：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>

与图片相同，但在顶部添加一个高度：32px顶部栏然后在顶部和底部栏之间自动填充绿色部分。

Answer 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

Answer 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。

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

2 个答案: