How to set canvas height to the maximum available height-CodePudding

I have a header on my website and I want to be able to set my canvas to fill all of the remaining height.

This is the Code:

<div include-html="../global/navbar.html">
    <ul >
        <li ><a href="/">Ben</a></li>
        <li ><a href="../projects">Projects</a></li>
    </ul>
</div>
<div >
    <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);
}

height:100%; sets the height to the height of the window

Filler so stackoverflow lets me save the edit:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CodePudding user response：

One way to take up the remaining space with the canvas would be to use flexbox.

In the following I use the property flex: 1 to tell the container to take the remaining 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 >
        <li ><a href="/">Ben</a></li>
        <li ><a href="../projects">Projects</a></li>
      </ul>
    </div>
    <div >
      <canvas id="Canvas"> </canvas>
    </div>