Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/438.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/83.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何防止动态创建的表溢出其div?_Javascript_Html_Jquery_Gridsplitter - Fatal编程技术网

Javascript 如何防止动态创建的表溢出其div?

Javascript 如何防止动态创建的表溢出其div?,javascript,html,jquery,gridsplitter,Javascript,Html,Jquery,Gridsplitter,这是一张正在发生的事情的图片。我希望垂直和水平滚动条和表格填充其容器div,而不是溢出 显示的分隔符来自一个名为gridsplit的jquery库 <script src="dist/jquery.gridsplit.optimised.js"></script> 表头是硬编码的,但正文是动态创建的 以下是一次尝试的html: <div style="float:left; overflow:auto; width:100%;

这是一张正在发生的事情的图片。我希望垂直和水平滚动条和表格填充其容器div,而不是溢出

显示的分隔符来自一个名为gridsplit的jquery库

<script src="dist/jquery.gridsplit.optimised.js"></script>

表头是硬编码的,但正文是动态创建的

以下是一次尝试的html:

 <div style="float:left; overflow:auto; width:100%; height:95%">
            <div id="grid4" class="grid">
                <div class="innerGrid">
                    <div id="leftCol" class="gridColumn" gs-width="15%">
                        <div class="gridCell" gs-height="60%">
                            <div class="fillCell">
                                <div id="parent">
                                    <select id="selectWatchlist" style="float:left"><option value="My Portfolio">My Portfolio</option></select>
                                    <button id="addSymbol" type="button" class="btn btn-primary"> 
                                        <i class="glyphicon glyphicon-plus-sign"></i> Syms
                                    </button>
                                </div>
                                <div style="display:table-cell">
                                    <table id="watchlist" style="width:100%; border:0; cellpadding:0; cellspacing:0; margin-bottom:5px;">
                                        <tr>
                                            <th>Sym</th><th>Price</th><th>% Change</th>
                                        </tr>
                                    </table>     
                                </div>                       
                            </div>
                        </div>
                        <div class="gridCell" gs-height="40%">
                            <div class="fillCell"><a>Notes</a></div>
                        </div>

我的投资组合
符号
同米百分比变化
笔记

我在谷歌上搜索了一整天,尝试了几十种组合都没有用。建议?

解决方案是简单地添加
display:block
,如下所示:

.gridCell .fillCell {
  height: 100%;
  display: block;
  overflow:auto;
}
现在它有滚动条,不会溢出。这是一张照片:


我可以发誓我试过了,但显然没有。

如果不能运行代码,很难判断。在问题编辑器中查找
按钮以创建交互式代码段。在那里我们可以看到你所看到的。一定要包括所有依赖项。代码很复杂。试着只模拟显示问题的片段需要几天的时间。我希望有人看到过类似的情况,一个表溢出了它的父div,尽管该div中有一个高度百分比和重载:auto set。我们还有其他方法可以看到它的运行吗?