Question

我有一个布局，我需要顶部的标签，以及填充其余空间的内容。因此，为了使底部内容延伸，我需要：

style="height:100% - 20px;"

其中20px是我标签的高度。显然代码无效，但它说明了我的观点。所以我接下来尝试的是一张桌子，其中拳头tr中的td具有设定高度（20px），而底行中的td没有高度设置。该表格双向设定为100％。这确实有效，底部td延伸填充。但是，只要我将代码放在我正在处理的项目中它就不起作用，这是因为项目正在使用的doctype（我无法更改）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

我说它不起作用的原因是在内容td内部有一个div设置为100％的宽度和高度，除非它的td具有定义的高度，它似乎无法看到100％是什么，并根据其内容简单地调整它的最小尺寸。

它不需要是一个表格布局，我更喜欢div实际 - 但不管怎样。

由于

Answer 1

这有帮助吗？

http://www.themaninblue.com/writing/perspective/2005/08/29/

我知道这主要与页脚有关，但副作用是将内容拉伸到100％高度。

Answer 2

据我了解你的问题，使用表格除了表格数据之外的其他任何东西都是一个严肃的禁区。

查看这篇Dynamic Drive script for tabbed content文章，它可能会帮到你很多:)

修改

<div> <h4>Heading</h4> <div> <ul> <li><a>Tab</a></li> <li><a>Tab</a></li> <li><a>Tab</a></li> </ul> <div>Content for Tab 1</div> <div>Content for Tab 2</div> <div>Content for Tab 3</div> </div> </div>

我相信这是一个更好的方法来展示它，然后它全部包含在一个div中，可以定义它自己的高度：）

Answer 3

尝试设置tr元素的高度而不是td（在IE6中它仍然不起作用）或尝试这样的事情：

<style type="text/css">
    html, body, .wrapper {
        height: 100%;
        width: 100%;    
        margin: 0;
    }
.head {
        height: 20px;
    }
</style>
<div class="wrapper">
    <div class="head">header</div>
    <p>content</p>
</div>

Answer 4

我不知道这是不是你要找的东西（因为我真的不了解你的需求，而且你有很多jQuery插件......）

你试过

吗？

<table width="100%" height="100%">
    <tr style="height:20px; display:block;">
        <td>pwet</td>
        <td>test</td>
    </tr>
    <tr style="height:100%;width:100%;">
        <td style="background:red; width:50%;"></td>
        <td style="background:blue; width:50%;"></td>
    </tr>
</table>

编辑：由于您正在使用表格，因此第一个tr中的td应该是th而第一个tr应该用thead包装

拉伸TD的

4 个答案: