Question

我的页面中有一个画布，我想让它填满页面，直到它到达页面底部。

我将画布的宽度设置为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

如果您知道画布上方内容的高度，则可以使用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);

Answer 2

我之前在CSS中创建了这个规则....

html, body {
    margin: 0;
}

将元素的高度展开到页面底部

2 个答案: