如何将canvas高度设置为最大可用高度

Question

我的网站上有一个 header，我希望能够设置我的 canvas 来填充所有剩余的高度。

这是代码：

<div include-html="../global/navbar.html">
    <ul class="navbar">
        <li class="navbar"><a href="/">Ben</a></li>
        <li class="navbar"><a href="../projects">Projects</a></li>
    </ul>
</div>
<div class="CanvasContainer">
    <canvas id="Canvas" height="440" width="200">
    </canvas>
</div>

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 400px;
}
body {
    padding: 0;
    margin: 0;
    background-color: #17141d;
    color: white;
    font-family: 'DM Mono', monospace;
}

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #17141d;
}

li.navbar {
    float: left;
}

li.navbar a{
    display: block;
    padding: 14px 16px;
}

a {
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    background-color: #17141d;
    color: white;
}

a:hover {
    background-color: #262130;
    background: linear-gradient(90deg,#ff8a00,#e52e71);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

function LoadCanvas(){
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
}

身高：100%；将高度设置为 window

的高度

Filler 所以 Whosebug 让我保存编辑：

事实上，痛苦本身很重要，随之而来的是对学生的教育，但只有同时发生一些巨大的痛苦和磨难。就最小的细节而言，任何人都不应从事任何一种工作，除非他从中得到一些好处。不要在痛斥中生气在快感中痛斥他要从痛中发一毛希望没有滋生。除非他们被情欲蒙蔽了双眼，否则他们不会出来，他们有错放弃他们的职责和软化他们的灵魂，即劳作。

Answer 1

用 canvas 占用剩余 space 的一种方法是使用 flexbox。

下面我用属性flex: 1告诉容器拿走剩下的space。

function LoadCanvas() {
        var canvas = document.getElementById("Canvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(0, 0, 150, 75);
      }

canvas {
        padding: 0;
        margin: auto;
        display: block;

        width: 400px;
        height: 100%;
      }
      body {
        padding: 0;
        margin: 0;
        background-color: #17141d;
        color: white;
        font-family: "DM Mono", monospace;

        display: flex;
        height: 100vh;
        flex-direction: column;
      }

      .CanvasContainer {
        display: flex;
        flex: 1;
      }

      ul.navbar {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #17141d;
      }

      li.navbar {
        float: left;
      }

      li.navbar a {
        display: block;
        padding: 14px 16px;
      }

      a {
        font-size: 20px;
        text-align: center;
        text-decoration: none;
        background-color: #17141d;
        color: white;
      }

      a:hover {
        background-color: #262130;
        background: linear-gradient(90deg, #ff8a00, #e52e71);
        -webkit-text-fill-color: transparent;
        background-clip: text;
        -webkit-background-clip: text;
      }

<div include-html="../global/navbar.html">
      <ul class="navbar">
        <li class="navbar"><a href="/">Ben</a></li>
        <li class="navbar"><a href="../projects">Projects</a></li>
      </ul>
    </div>
    <div class="CanvasContainer">
      <canvas id="Canvas"> </canvas>
    </div>

如何将canvas高度设置为最大可用高度

How to set canvas height to the maximum available height

html

css

canvas