how to float an underlying div to a svg - html

Question

I am trying to let float an underlying div to a svg. problem is: when i reduce the screenwidt, the distance between the svg and the underlying div increases.
How can i achieve that the div under the svg always floats against the svg without whitespace?
This is my code:
<div class="svg">
<svg viewBox="0 0 1439 150" style="position:fixed; top:250px; left:0;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Sell-on-FG-Flow" transform="translate(-1.000000, -2412.000000)" fill="#1e90ff">
<g id="Customer-Section" transform="translate(1.000000, 1026.000000)">
<g id="loading" transform="translate(0.000000, 1386.807849)">
-----pathes are here ---
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="under">
let the red div float against the waves
</div>
And the css:
.svg {
height: 400px;
width: 100%;
}
.under {
height: 40px;
background: red;
}
Fiddle: https://jsfiddle.net/45b3n5q8/1/

Answer 1

Position fixed inline style in the SVG removes the element from the document flow and it will behave like an absolute position, remove the inline style from the svg and it should be ok, there's a small margin that can be removed with a negative margin top.
.under {
background: red;
margin-top: -5px;
}
see pen