Dynamic panel Height based on screen size

Question

How to get the panel height to increase dynamically based on screen size

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

I have a table inside panel body. where dynamically data would get added to it. I want the panel to have scroll but it main page should not get the scroll. The panel height to be [Windowheight - 10px]

Web page

I don't want the page to have scroll, I want only the panel to have scroll

Does this answer your question? [Set div height equal to screen size](https://stackoverflow.com/questions/12172177/set-div-height-equal-to-screen-size) — Vega, May 20 '20 at 15:28

score 1 · Answer 1 · edited Jul 07 '17 at 01:29

1

Try this css code:

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

Or

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

More details:

100vh is 100% viewport height/screen's height. See more.
calc is a calculator. In this case, it takes 100% of the screen's height and minuses 200px from it See more.

edited Jul 07 '17 at 01:29

Chris Happy

7,088
2
22
49

answered Jul 07 '17 at 01:19

Hasan Delibaş

470
3
14

Delibas It worked, can you please explain what is calc(100vh - 200px); – Sandeep Dvs Jul 07 '17 at 01:22

score 0 · Answer 2 · answered Mar 05 '20 at 07:09

0

Instead of height: 100%; use height: 100vh

the vh matches the height of the viewport.

answered Mar 05 '20 at 07:09

Sahil Ralkar

2,331
23
25

Dynamic panel Height based on screen size

2 Answers2