2009-10-20 170 views
1

对不起,如果这已经得到解答,但搜索“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> 

+0

你说 “不” ......请完成句子。 – 2009-10-20 14:11:55

+0

“在Firefox中,它不会”以逗号拼接。它不会在Firefox工作,但基于WebKit浏览器 – 2009-10-20 14:28:19

+0

这听起来像一个标准的头,体尺布局工作,并不比很多很多这样的布局不同的人都制定了只使用CSS。 (搜索“粘脚”来获得更多的例子,而不是你可以摇一摇。)你为什么认为你需要一张桌子? – Martha 2009-10-20 17:01:36

回答

4

试试这个工作!

我测试了使用

  • 的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> 
+0

真棒,非常感谢你!现在,您似乎也可以回答,我怎样才能使顶部/底部的可变高度单元格完成?换句话说,我不知道自己的身高,但我可以衡量他们,这是棘手的,我想,以避免 – skrat 2009-10-27 09:55:38

+0

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

+0

听起来不错,应该工作,只是严格的DOCTYPE测试,似乎没有再工作:( – skrat 2009-10-27 10:02:05