Question

我正在使用Bootstrap作为基于xml技术的Web应用程序（具有更好形式的XForms作为处理器，XQuery等）。我用eXist-db创建了它。

我现在遇到以下问题：我想创建一个响应式用户界面，为此我希望引导网格的高度适合每个屏幕，所以我希望它填满屏幕高度的80％。但这并没有真正起作用。这是我的代码：

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

百分比只适用于width参数。如果我用80％的高度参数交换高度参数，例如500px一切正常，但百分比不在这里工作，我不明白为什么。在每个屏幕分辨率中，内容中的表格完全显示，但它与屏幕高度重叠。

我很感激每一个提示。

Answer 1

使用vh单位（1 vh =屏幕垂直高度的1％）

所以请使用height: 80%;

而不是height: 80vh;

Bootstrap网格高度与屏幕分辨率的百分比

1 个答案: