拉伸TD的

我有一個佈局，我需要在頂部的標籤，並填充其餘空間的內容。因此，爲了使底部內容的div伸展我需要有：拉伸TD的

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

凡20px的是我的標籤的高度。很明顯，代碼是無效的，但它說明了我的觀點。所以我接下來嘗試的是一個表格，其中第一個tr中的td具有設定的高度（20px）並且最下一行中的td沒有設置高度。這個表格被設置爲100％兩種方式。這確實有效，底部td延伸填充。但是隻要我把我做這個工作，不工作的項目中的代碼，這是因爲該項目使用（我不能改變）的文檔類型的：

<!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的實際 - 但無論如何。

感謝

來源

2010-09-28 Matt

這有幫助嗎？

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

我知道這主要與頁腳但一個副作用做的就是伸展含量爲100％的高度。

來源

2010-09-28 10:16:44

完美，謝謝！ – Matt 2010-09-30 14:31:02

據我理解你的問題，使用比表格數據之外的其它表是一個嚴重的不走區域。

看看這個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 :)

來源

2010-09-28 08:41:18 Kyle

不幸的是，這並沒有幫助。我的問題不在於選項卡。我需要這個：

Header/tabs here. Set height

Content here. This div must take up the rest of the page

– Matt 2010-09-28 08:52:42

嘗試設置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>

來源

2010-09-28 10:07:23 Adam

-1

我不知道如果這是你在找什麼（因爲我並不真正瞭解你的需求，你得到了這麼多的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的應該是第一個和第一TR應該有一個THEAD包裹

來源

2010-09-28 10:11:48 Shikiryu

回答

相關問題