Fixed height for bootstrap pre-scrollable DIV

Question

In my application I have to display bootsatarp grid for database records. Since the number of records count are large enough to view without full page scrolling I wrap my table with bootstrap pre-scrollable div and it gave me the functionality to scroll the table. However all the time DIV size is half of the browser windows. I tried almost every stack overflow posts and suggestions and simply they not work for me. I also tried to fix this with support of java script and it also failed.

This is my HTML code

<div class="col-md-9">
<div  class="pre-scrollable">
<table class="table table-bordered table-hover header-fixed"  id="sometable">
                    <thead>
                  <tr>
                    <th>EMP_No</th>
                    <th>Name</th>
                    <th>Designation</th>
                    <th>Department</th>
                    <th>Type</th>
                    <th>#Days</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Half day</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
                <?php  //php code for print the table
                 ?>
</div>      
</div>

I populate above table with the results of PHP code. I have not idea how to set this DIV's height to fixed value or full value of the browser windows.below are the CSS that are use

<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
td, th {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 1px;
}
thead th {
    text-align: center;
    background-color: #3498db;
}
tr:nth-child(even) {
    background-color: #dddddd;
}
</style>

This is the result web page

score 28 · Accepted Answer · answered Aug 25 '16 at 14:15

28

There is a max-height property set for the .pre-scrollable div in the bootstrap css file.

.pre-scrollable {
    max-height: 340px;
    overflow-y: scroll;
}

That might be the source of your problem.

answered Aug 25 '16 at 14:15

Vcasso

1,328
1
8
14

score 14 · Answer 2 · answered Jul 14 '17 at 07:59

14

For simplicity you can use css viewport dimensions. Something like this:

<div class="pre-scrollable" style="max-height: 75vh">
     <table>...</table>
</div>

where "75vh" is 75% of visible height.

answered Jul 14 '17 at 07:59

Maxim Prasolov

431
5
5

You're awesome! – Mandres Dec 22 '21 at 11:15

score 5 · Answer 3 · edited May 23 '17 at 12:26

Twitter bootstrap - Fixed layout with scrollable sidebar will help... As the example on linked page will show you need to set the height of the div not table.

<style type="text/css">
        body, html {
            height: 100%;
            overflow: hidden;
        }

        .navbar-inner {
            height: 40px;
        }

        .scrollable {
            height: 100%;
            overflow: auto;
        }

        .max-height {
            height: 100%;
        }

        .no-overflow {
            overflow: hidden;
        }

        .pad40-top {
            padding-top: 40px;
        }
</style>

Thanks for the answer. – rafalefighter Aug 25 '16 at 14:30 — rafalefighter, Aug 25 '16 at 14:30

Fixed height for bootstrap pre-scrollable DIV

3 Answers3

Linked