html - 如何将元素的大小调整到完整的可见高度

Question

我正在尝试制作一个 div，它在页眉和页脚之间调整为整页高度。我不希望页面上有任何滚动，我环顾四周，找不到适合我的解决方案。

这是我网页的图片。

无论浏览器的缩放比例如何，我都希望黑色边框一直向下扩展到绘制的红线。显然宽度已经有效，但我一辈子都无法获得高度。

这是我的代码:

<div class="row" style="height:100%;">
    <div class="col-md-2" style="border:1px solid black;">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">Links</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
    <div class="col-md-10" style="border:1px solid black">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Viewer</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
</div>

Answer 1

您必须将 html 和 body 的高度设置为 100%，然后您可以设置子项的高度。我建议不要在 .row 类上设置 100%，因为这是 Bootstrap，所以也许可以创建自己的类。然后你也需要你的列是 100% 高度。

html, body { height:100% }
.row-wrapper { height:100% }
.row-wrapper .col-md-2, .row-wrapper .col-md-10 {height:100%}    

...

<div class="row row-wrapper">

请记住 css 规则 .row-wrapper .col-md-2, .row-wrapper .col-md-10 {height:100%} 不是很灵活，所以我建议创建另一个类来同时针对这两个类。