0

I am using Bootstrap for my web application based on xml technologies (XForms with betterform as processor, XQuery etc.). I created it with eXist-db.

I have the following problem now: I want to create a responsive user interface and for that I want the height of the bootstrap grids fit on every screen so I want it to fill 80% of the height of the screen. But that does not really work. Here is my code:

<div class="col-md-3">
    <div class="orderListRepeat">
        <h3>Details</h3>
        <div style="height: 80%; width: 100%; overflow-y: scroll; overflow-x: scroll;">
            <table class="table table-striped">
                <tr>
                    <td>
                        <b>Name:</b>
                    </td>
                    <td>
                        <xf:output ref="//object[index('object-repeat')]/name"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Number:</b>
                    </td>
                    <td>
                        <xf:output ref="//object[index('object-repeat')]/number"/>
                    </td>
                </tr>
                <tr>
                    ...
                </tr>
            </table>
        </div>
    </div>
</div>

Percentages just work on the width parameter. If I exchange the 80% of the height parameter with e.g. 500px everything works fine but percentages don't work here and I cannot understand why. In every screen resolution the table in the content is displayed completely although it overlaps the screen height.

I am thankful for every hint.

Felix
  • 115
  • 2
  • 12
  • have you searched enough to find and try something like on these links ? https://stackoverflow.com/questions/27530954/get-bootstrap-container-to-full-height https://stackoverflow.com/questions/11677886/twitter-bootstrap-div-in-container-with-100-height – Red fx Oct 26 '17 at 14:43

1 Answers1

0

Use vh units (1 vh = 1% of vertical height of screen)

so instead of height: 80%;, use height: 80vh;

andi
  • 6,442
  • 1
  • 18
  • 43