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

Question

我正在为基于 xml 技术的 Web 应用程序使用 Bootstrap(XForms with betterform 作为处理器，XQuery 等)。我用 eXist-db 创建了它。

我现在遇到以下问题:我想创建一个响应式用户界面，为此我希望 Bootstrap 网格的高度适合每个屏幕，所以我希望它填充屏幕高度的 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>

百分比仅适用于宽度参数。如果我将 80% 的高度参数交换为例如500px 一切正常，但百分比在这里不起作用，我不明白为什么。在任何屏幕分辨率下，内容中的表格都会完整显示，尽管它与屏幕高度重叠。

我感谢每一个提示。

Answer 1

使用 vh 单位(1 vh = 屏幕垂直高度的 1%)

所以不要使用height: 80%;，而是使用height: 80vh;