问题:https://jsfiddle.net/sjefb/xctr0zve/1/
<div style="height: 500px; border: 1px solid red">
<table border="1" id="table1">
<tr>
<td id="td1"></td>
</tr>
<tr>
<td id="td2">
<div>
testtest
</div>
</td>
</tr>
<tr>
<td id="td3">
<div id="div1">
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
</div>
</td>
</tr>
</table>
</div>
CSS:
#table1 {
height: 100%;
width: 100%;
}
#td1 {
height: 40vh;
width:100%;
min-height: 240px;
}
#td2 {}
#td3 {
height: 60%;
overflow: hidden;
}
#div1 {
overflow: auto;
height: 180px;
/*works, not what I want*/
height: 100%;
display:block;
/* doesn't work*/
}
我希望td3中的行可以滚动,而表格不会超过红色区域。页面必须在所有屏幕格式上都可读,因此所有内容都必须使用百分比来完成。我试着喘着粗气,但桌子仍然长得太大了。
你对我有什么建议吗?谢谢!
更新