javascript - 使用 flex box，使用父节点的 clientWidth 和 Height 设置 Canvas 的宽度和高度隐藏粘性页脚

Question

我正在尝试在下方创建列布局，即页眉、内容和粘性页脚。我希望 Canvas 的宽度和高度使用 JavaScript 跟随其内容的 clientWidth 和 clientHeight。

<style>
body {
;   margin          : 0
;   height          : 100%
;   display         : flex
;   flex-direction  : column
}

header,
footer {
;   flex    : 0
}

#content {
;   flex    : 1
}
</style>

<header>header</header>
<div id=content>
    <canvas id=canvas></canvas>
</div>
<footer>footer</footer>

<script>
    canvas = document.getElementById( 'canvas' )
    ctx = canvas.getContext( '2d' )
    const
    FitCanvas = () => {
        canvas.width = canvas.parentNode.clientWidth
        canvas.height = canvas.parentNode.clientHeight
        ctx.beginPath()
        ctx.moveTo( 0, 0 )
        ctx.lineTo( canvas.width, canvas.height )
        ctx.stroke()
    }
    window.addEventListener(
        'resize'
    ,   FitCanvas
    )
    FitCanvas()
</script>

展开窗口时看起来不错。但是当缩小窗口时，页脚不会粘住。

初始:

展开:

缩小:

我想制作缩小图像以匹配初始图像。

请帮助，在此先感谢。

Answer 1

当您展开视口(viewport)时，FitCanvas使 Canvas 更大，这使得 <div id=content>大。缩小视口(viewport)时，<div id=content>保持适合其子项的大小，即 canvas .

你应该重写你的 FitCanvas函数不基于父级的大小进行计算。

canvas.width = canvas.parentNode.clientWidth
canvas.height = canvas.parentNode.clientHeight

应该变成类似

的东西

canvas.width = window.innerWidth
canvas.height = window.innerHeight - header.offsetHeight - footer.offsetHeight

这不是最有效的做事方式，但希望它能为您指明正确的方向，您会明白为什么 'resize'处理程序似乎只能以一种方式工作。