Expand the element's height to bottom of the page

Question

I have a canvas in my page, and i want it to fill the page until it reaches the bottom of the page.

I have the canvas' width set to 100%, but i cannot set the height to 100% as it extends too far.

The position of the div is not 0,0 of the browser window there are other things above it, so i end up with a scroll bar because 100% height extends well below the bottom of my browser's output.

So i was wondering how can i extend the element's height to reach the bottom of the page from its current position on the web page?

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

Do i need to use JavaScript or is there a CSS method to doing this?

Answer 1

If you know the height of the content above the canvas, you can use top and bottom properties to take up the rest of the space:

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;
}

And if you don't know the height of the above content, you can calculate it:

JQuery Example: JS Fiddle

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

Answer 2

this technique is also great when making resizable popups with fixed height headers and footers, but fluid height content

https://jsfiddle.net/ca5tda6e/

set the header (.logo) to a fixed height

.logo{
    height: 100px;
    background-color: lightGray;
    position: relative;
    z-index: 1;
}

then position the content (.output) absolute, with a padding-top: 100px

.output{
    width: 100%;
    height: 100%;
    box-sizing: border-box; /* so that padding is included in width/height */
    padding-top: 100px; /* padding-top should be equal to .logo height */
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden; /* there was like a pixel of something i couldnt get rid of, could have been white space */
}

Answer 3

I've had this problem before, in CSS, create this rule....

html, body {
    margin: 0;
}