股利使表較大，而不是滾動條

請看看這個代碼示例：http://jsfiddle.net/Voga/e6kB8/1/股利使表較大，而不是滾動條

如果只有4「A」字div和表很好地滿足了整個屏幕。

現在，當我添加更多「A」字符時，表格變得越來越大。我希望表格高度保持不變，但是當DIV包含太多行時，它會得到一個滾動條。我嘗試了一切，但找不到解決方案。

有人可以幫我嗎？

HTML：

<table> 
    <tr class="small"> 
     <td>test1</td> 
    </tr> 
    <tr class="small"> 
     <td>test2</td> 
    </tr> 
    <tr> 
     <td> 
      <div class="scroll"> 
       A <br></br> 
       A <br></br> 
       A <br></br> 
       A <br></br> 
       A <br></br> 
       A <br></br> 
       A <br></br> 
       ... 
      </div> 
     </td> 
    </tr> 
</table>

CSS：

body, html{ 
    height:100%; 
    width:100%; 
} 

.small{ 
    height:20px; 
} 

table{ 
    height:100%; 
    width:100%; 
    border-style:solid; 
    border-width:2px; 
} 

td{ 
    border-style:solid; 
    border-width:3px; 
} 

tr{ 
    vertical-align:top; 
} 

div{ 
    border-style:solid; 
    border-width:5px; 
    width:100%; 
    overflow:scroll; 
    height:100%; 
    max-height:100%; 
    display:table; 
}

來源

2014-05-07 Dommicentl

你有什麼用表高度意味着應保持不變？最大值時表格高度應該是視口的100％......當單元格的內容會導致表格滾動並且大於視口時，是否需要視口上或表格單元格內的滾動條（100 ％的窗口的高度？） – JohanVdR

我確實希望表保持視口的大小，並將滾動條添加到div容器。 – Dommicentl

你需要這個IMHO JS。 – JohanVdR

嘗試從div刪除display:table;，它爲我工作：

div{ 
    border-style:solid; 
    border-width:5px; 
    width:100%; 
    overflow:auto; 
    height:100%; 
    max-height:100%; 
    display:table; 
}

另外，如果你改變overflow:scroll到overflow:auto它」將刪除usele當你只有幾個要素SS滾動...

JSFiddle Demo

來源

2014-05-07 15:55:18 DarkAjax

這不會將滾動條添加到單元格內的div。 – JohanVdR

這似乎在Chrome中工作，但在IE中不起作用 – Dommicentl

股利使表較大，而不是滾動條

回答

相關問題