javascript - 将元素的高度扩展到页面底部

Question

我的页面中有一个 Canvas ，我希望它填满页面直到到达页面底部。

我将 Canvas 的宽度设置为 100%，但我无法将高度设置为 100%，因为它延伸得太远了。

div 的位置不是浏览器窗口的 0,0，它上面还有其他东西，所以我最终得到一个滚动条，因为 100% 高度延伸到浏览器输出底部的下方。

所以我想知道如何扩展元素的高度以从其在网页上的当前位置到达页面底部？

<style>
.canvas{
    position:absolute;
    width:100%;
    height:100%;
}
<style>
<div class="logo">Stuff here</div>
<div class="output">
    <canvas class="canvas"></canvas>
</div>

我需要使用 JavaScript 还是有 CSS 方法来执行此操作？

Answer 1

如果您知道 Canvas 上方内容的高度，则可以使用 top 和 bottom 属性占据剩余的空间:

JS Fiddle

.logo {
    height: 40px;
}
.output {
    position: absolute;
    top: 40px; // height of above content
    bottom: 0;
    width: 100%;
    padding: 0;
}
.canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

如果不知道上面内容的高度，可以计算一下:

JQuery 示例:JS Fiddle

var height = $('header').height();
$('.output').css('top', height);