【发布时间】：2015-01-24 18:43:06
【问题描述】：
例如，我有一个尺寸为 width: 100%; 和 height: 100%; 和 overflow: auto; 的元素容器
当我在其中添加更多元素时，这些元素对于容器来说变得太大了，它会增加自己的区域以适应这些元素，而不是显示滚动。
有什么解决办法吗？
例子：
<html style = 'height: 100%;'>
<head>
<title>test scrolls</title>
</head>
<body style = 'height: 100%;'>
<table border = '1' style = 'width: 100%; height: 100%;'>
<tr><td id = "test_td" height = '50%' style = 'overflow: scroll;'></td></tr>
<tr><td height = '50%'><input type = "button" value = "add a lto of junk in first td" onclick = "document.getElementById('test_td').innerHTML = 'asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />'" /></td></tr>
</table>
</body>
</html>
好的，另一个 div 示例：
<html style = 'height: 100%;'>
<head>
<title>test scrolls</title>
</head>
<body style = 'height: 100%;'>
<table border = '1' style = 'width: 100%; height: 100%;'>
<tr><td height = '50%'><div id = "test_div" style = 'width: 100%; height: 100%; overflow: scroll;'></div></td></tr>
<tr><td height = '50%'><input type = "button" value = "add a lot of junk in div in first td" onclick = "document.getElementById('test_div').innerHTML = 'asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />'" /></td></tr>
</table>
</body>
</html>
【问题讨论】：
-
请提供您拥有的代码或创建一个小提琴。
-
请给我们看一些代码，并提供一个带有工作演示的 JSFiddle 链接
-
你可以用javascript来做...我认为这是唯一的方法...
-
@Gezzasa - 我添加了示例。
-
@pomeh - 我添加了示例。
标签： html css scroll containers