Javascript 基于屏幕大小的动态面板高度

如何根据屏幕大小动态增加面板高度

<div class="container-fluid">


<!--Heading-->
<div class="row " align="center">
    <h1 style="font-family: 'Roboto', sans-serif; font-size: 45px;"> Test Automation Inventory</h1>
</div>


<!--Table-->
<div class="row" >
    <div class="col-lg-12 col-md-12">
        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" ng-click="Reset()">&nbsp;Add New Test Details</button>
        <div class="panel panel-primary">
            <div class="panel-heading ">
                <h3 class=" panel-title pull-left" style="padding-top:7.5px">Test Automation Inventory</h3>

                <div class="input-group">
                    <input id="Special" type="text" class="form-control" placeholder="Search" autocomplete="off" focus ng-model="FilterItems">
                    <span class="input-group-btn">
                        <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
                    </span>
                </div>
            </div>
            <!-- style="overflow:auto; height:670px"-->
            <div class="panel-body scroll" style="overflow:auto; height:670px">

                <table class="table table-striped table-hover">

                    <tr ng-show="results.length==0">
                        <td style="vertical-align:middle;">No data found</td>
                    </tr>
                    <tr>
                        <th ng-repeat="c in columns" ng-click="ChangeOrder(c)">{{c.text}}</th>
                    </tr>
                    <tr class="animate-repeat" ng-repeat="Res in results | filter:FilterItems | orderBy: Column:reverse ">
                        <td> {{$index+1}}</td>
                        <td>{{Res.Test_Inventory_Group}}</td>
                        <td>{{Res.Test_Inventory_Application}}</td>
                        <td>{{Res.Test_Inventory_Count}}</td>
                        <td>
                            <button class="btn btn-danger">Delete Test</button>
                        </td>
                    </tr>

                </table>

            </div>
        </div>
    </div>
</div>

测试自动化清单
添加新的测试详细信息
测试自动化清单
没有找到任何数据
{{c.text}}
{{$index+1}}
{{Res.Test_Inventory_Group}
{{Res.Test\u Inventory\u Application}
{{Res.Test_Inventory_Count}}
删除测试

我在面板主体内有一张桌子。动态地将数据添加到其中。 我想面板有滚动，但它的主页不应该得到滚动。 面板高度为[Windowheight-10px]

我不希望页面有滚动，我只希望面板有滚动

尝试以下css代码：

.panel-body.scroll {  height: calc(100vh - 200px);  }

或

更多详情：

• 100vh

  是

  100%

  视口高度/屏幕高度

• calc

  是一个计算器。在这种情况下，它占据屏幕高度的100%，并从中减去

  200px

---

代替身高：100%使用高度：100vh

---

vh与视口的高度相匹配

Delibas它起作用了，你能解释一下什么是calc（100vh-200px）吗；这回答了你的问题吗？

<div class="panel-body scroll" style="overflow:auto; height: calc(100vh - 200px);">