SVG - top section fixed, middle section variable, bottom section fixed - svg

Question

I am trying to create an svg object with top, middle and bottom sections, where top and bottom are of fixed height, and fixed should occupy all the space between top and bottom (depending on the height of the browser window or other containing object). Here is some code that does NOT work:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="mainSvg" xmlns="http://www.w3.org/2000/svg" version="1.1"
width="100%" height="100%"
viewbox="0 0 1000 500"
preserveAspectRatio="none"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="background-color: #cccccc;">
<svg id="top" x="0" y="0" width="100%" height="50"
style="overflow: visible;">
<line x1="0" y1="0" x2="100%" y2="100%"
style="stroke-width:5; stroke: red;"/>
<line x1="0" y1="100%" x2="100%" y2="0"
style="stroke-width:5; stroke: red;"/>
</svg>
<svg id="middle" x="0" y="50" width="100%"
style="overflow: visible;">
<line x1="0" y1="0" x2="100%" y2="100%"
style="stroke-width:5; stroke: blue;"/>
<line x1="0" y1="100%" x2="100%" y2="0"
style="stroke-width:5; stroke: blue;"/>
</svg>
<svg id="bottom" x="0" y="100%" width="100%" height="50"
style="overflow: visible;">
<line x1="0" y1="0" x2="100%" y2="-100%"
style="stroke-width:5; stroke: red;"/>
<line x1="0" y1="-100%" x2="100%" y2="0"
style="stroke-width:5; stroke: red;"/>
</svg>
</svg>
If you run that, you will see that top appears at the top and bottom is at the bottom (with the assistance of a little "-100%" hack).
Middle starts below top (y="50") but because its height is defaults to "100%", it overlaps bottom and indeed extends below the available rendering area. Clearly, its height needs to be "100% - 50 - 50", but there is no way to express that. Css has a nice feature where you can say
height: calc(100% - 50 - 50);
but in svg "height" is not a property that can be specified within css. So there I am stuck.
Note that in the intended application, the whole thing will be embedded within an html page, the insides of the sections will contain complicated svg, and I require that the whole thing can be resized vertically with automatic scaling of "middle", mainly because that will be necessary in order to print the page on some given size of paper.
Making such a structure with three 'div's in HTML is easily done, and at a pinch I could create three such 'div's and embed three pieces of svg within them, but that would be messy. I hope there is an easier way.