如何使用百分比高度显示表格中的div的滚动条

我必须编写如下的页面，但是，滚动条不显示在IE 11和FireFox中。我该怎么做才能解决问题？如何使用百分比高度显示表格中的div的滚动条

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<title>test</title> 
 
</head> 
 
<body> 
 
<table style="width: 100%; height: 100%;"> 
 
    <tr> 
 
    first row 
 
    </tr> 
 
    <tr style="height:100%"> 
 
    <td style="height:100%; width:100%"> 
 
    <div style="height:100%; width:100%;overflow:auto;direction:rtl"> 
 
    <div> 
 
     <table> 
 
     <%for(int i=0;i<10000;i++){%> 
 
     <tr> 
 
      <td><%=i%></td> 
 
     </tr> 
 
     <%}%> 
 

 
     </table> 
 
     </div> 
 
    </div> 
 
    </td> 
 
    </tr> 
 
</table> 
 
</body> 
 
</html>

来源

2015-10-20 Kevin

在Chrome中无法正常工作，无论是 – Fiido93

这只是一个样本code.Maybe我错过一些重要的事情。无论如何，我真正想要的就是这样：表格行包含一个带滚动条的div，并且div的高度必须用百分比值设置。请您帮我解决这个问题吗？ – Kevin

您可以使用px来控制高度表，而不是使用％。 – Fiido93

试试这个也许你可以用这种风格实现一些东西。

CSS

.scroll { 
    height: 30%; 
    overflow: auto; 
    width: 100%; 
    display:block; 
}

DEMO

更新DEMO

来源

2015-10-20 03:40:34 Fiido93

它看起来不错，但不是我想要的。谢谢。 – Kevin

你想让div控制高度吗？我不明白 – Fiido93

我想要的是这样的：一个表包含两行，第二行有一列。在列中，div有一个包含大量数据的表。出于某种原因，我无法更改结构。 – Kevin

只需添加overflow:auto以适用于任何一个元素，它是要显示滚动条上的CSS规则。

另一种选择是overflow:scroll但将显示滚动条的元素是否需要滚动，而这也说明都滚动条 - 水平和垂直 - 所有的时间，无论他们是需要在时间或不。这就是为什么我总是倾向于使用auto作为溢出值。

来源

2015-10-20 02:32:01

我没有添加溢出选项，它不起作用。代码在Chrome中运行良好。我很困惑。 – Kevin

您确定表格行正在FF/IE中成功创建吗？我最近有一个场景，溢出属性适用于这两种浏览器。不知道你使用的是哪个版本的FF，但IE11应该没问题。另外，你确定你正在将属性添加到正确的CSS规则中吗？也许如果你也发布了你的CSS，我们可以帮助更多:) –

这真是太好了。我确定表格行已经创建，因为日期已经显示。这是带有CSS的示例代码。 http://jsfiddle.net/Kevinlovecoding/sueayq3s/1/。 – Kevin

如何使用百分比高度显示表格中的div的滚动条

回答

相关问题