帶有表格的CSS垂直佈局

對不起，如果這已經得到解答，但搜索「100％高度」的東西很困難。帶有表格的CSS垂直佈局

我的問題是，我需要100％的高度表格佈局，因爲瀏覽器完成了自動單元格大小調整，我不想讓自己腳本出於顯而易見的原因。

它不同於其他「100％問題」，因爲我需要一些單元格粘在頂部和一些底部，並通過瀏覽器調整中間值以填充剩餘空間。

這種工作，當我需要中間部分包含溢出的東西時，問題發生，顯然我想溢出：自動在那裏使用戶通過那些東西。它在WebKit中工作;在Firefox中，它不會;其他未經測試。這是測試用例。

<html> 
<head> 
    <style> 

     body, html { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     table { 
      height: 100%; 
      width: 200px; 
      border: 0; 
     } 

     .fill { 
      background-color: red; 
     } 

     .cont { 
      overflow: auto; 
      height: 100%; 
     } 

    </style> 

</head> 
<body> 
    <table> 
     <tr> 
      <td style="height:50px"></td> 
     </tr> 
     <tr> 
      <td style="height:100px"></td> 
     </tr> 
     <tr> 
      <td class="fill"> 
       <div class="cont"> 
        An opaque handle to a native JavaScript object. A JavaScriptObject cannot be created directly. JavaScriptObject should be declared as the return type of a JSNI method that returns native (non-Java) objects. A JavaScriptObject passed back into JSNI from Java becomes the original object, and can be accessed in JavaScript as expected 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td style="height:100px"></td> 
     </tr> 
    </table> 
</body>

來源

2009-10-20 skrat

你說「不」 ......請完成句子。 – 2009-10-20 14:11:55

「在Firefox中，它不會」以逗號拼接。它不會在Firefox工作，但基於WebKit瀏覽器 – 2009-10-20 14:28:19

這聽起來像一個標準的頭，體尺佈局工作，並不比很多很多這樣的佈局不同的人都制定了只使用CSS。（搜索「粘腳」來獲得更多的例子，而不是你可以搖一搖。）你爲什麼認爲你需要一張桌子？ – Martha 2009-10-20 17:01:36

試試這個工作！

我測試了使用

的Internet Explorer 7 & 8（Windows）中
火狐3.5 （蘋果&視窗）
的Safari 4.0（Mac的& 視窗）

也許你想改變寬度並將最小高度增加到像素值。

Demo Source

<html> 
<head> 
    <style> 

     body, html { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     table { 
      height: 100%; 
      width: 200px; 
      border: 0; 
     } 

     .fill { 
      background-color: red; 
     } 

     .cont { 
      position:relative; 
      max-height:100%; 
      min-height:100%; 
      height: 100%; 
     } 

     .cont2 { 
      position:absolute; 
      height: 100%; 
      overflow:auto; 
     } 

    </style> 

</head> 
<body> 
    <table> 
     <tr style="height:50px"> 
      <td style="height:50px">50px</td> 
     </tr> 
     <tr style="height:50px"> 
      <td style="height:100px">100px</td> 
     </tr> 
     <tr> 
      <td class="fill"> 
       <div class="cont"> 
        <div class="cont2"> 
        An opaque handle to a native JavaScript object. A JavaScriptObject cannot be created directly. JavaScriptObject should be declared as the return type of a JSNI method that returns native (non-Java) objects. A JavaScriptObject passed back into JSNI from Java becomes the original object, and can be accessed in JavaScript as expected 
        </div> 
       </div> 
      </td> 
     </tr> 
     <tr style="height:50px"> 
      <td style="height:100px">100px</td> 
     </tr> 
    </table> 
</body>

來源

2009-10-27 09:44:12 jantimon

真棒，非常感謝你！現在，您似乎也可以回答，我怎樣才能使頂部/底部的可變高度單元格完成？換句話說，我不知道自己的身高，但我可以衡量他們，這是棘手的，我想，以避免 – skrat 2009-10-27 09:55:38

設置有高度爲1px'高度：1px的;'。這可能工作。只要玩高度和最小高度。 – jantimon 2009-10-27 09:58:52

聽起來不錯，應該工作，只是嚴格的DOCTYPE測試，似乎沒有再工作:( – skrat 2009-10-27 10:02:05

帶有表格的CSS垂直佈局

回答

相關問題