我正在尝试制作一个 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>
最佳答案
您必须将 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%}
不是很灵活,所以我建议创建另一个类来同时针对这两个类。
关于html - 如何将元素的大小调整到完整的可见高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39458514/