请查看此代码示例:http://jsfiddle.net/Voga/e6kB8/1/
如果只有4" A" div和table很好地填充整个屏幕。
现在当我添加更多" 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;
}
答案 0 :(得分:1)
尝试从display:table;
删除div
,它对我有用:
div{
border-style:solid;
border-width:5px;
width:100%;
overflow:auto;
height:100%;
max-height:100%;
display:table;
}
此外,如果您将overflow:scroll
更改为overflow:auto
,那么当您只有几个元素时,它会删除无用的滚动...