1

目前我的布局使用表格，但在 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 顶部栏，然后绿色部分在顶部和底部栏之间自动填充。

4

2 回答 2

2

尝试这个

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 文件

于 2013-07-04T13:39:01.793 回答
0

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

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

于 2013-07-04T13:46:07.667 回答