基于屏幕尺寸的动态面板高度答案

【问题标题】：Dynamic panel Height based on screen size基于屏幕尺寸的动态面板高度
【发布时间】：2020-03-05 15:09:49
【问题描述】：

如何让面板高度根据屏幕尺寸动态增加

<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>

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

Web page

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

【问题讨论】：

这能回答你的问题吗？ Set div height equal to screen size

标签： javascript html css twitter-bootstrap

【解决方案1】：

试试这个css代码：

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

或者

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

更多细节：

100vh 是100% 视口高度/屏幕高度。 See more。
calc 是一个计算器。在这种情况下，它占用了屏幕高度的 100% 并减去了 200px See more。

【讨论】：

Delibas 成功了，你能解释一下什么是 calc(100vh - 200px);

【解决方案2】：

而不是 height: 100%; 使用 height: 100vh

vh 与 viewport 的 height 匹配。

【讨论】：