Make image fill remaining vertical height without using float

Question

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> div {box-sizing: border-box; color: white;} img {margin: 0px; padding: 0px; height: 100%; width: 100%;} h2 {float: left; display: block; padding-bottom: 10px; font: 14px sans-serif; background-color: red; width: 100%; margin: 0px;} div.left {background-color: black; border-right:solid 5px white; float: left; width: 66.66%; padding: 10px; overflow: auto; } div.right {background-color: green; border-left:solid 5px white; float: right; width: 33.33%; padding: 10px; overflow: auto;} </style> <div class="container" style="width: 100%; background-color: red;"> <div class="left" aspect="2"> <h2>this a header</h2> <img src="http://imagesofrmnp.com/images/300/Longs-Illuminated.jpg" width="100%" height="100%" /> </div> <div class="right" aspect="1"> <h2>this a header</h2> <img src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2049807/school-house_1x.png" width="100%" height="100%" /> </div> </div> <script type="text/javascript"> function FixAspect() { $("div[aspect]").css("height", function() { return Math.round(this.getBoundingClientRect().width / $(this).attr("aspect")); }); } setInterval(FixAspect, 50); </script> 

You can see that by using height 100% the image overflows because the header takes a part of those 100%. So basically it has to fill the remaining space.

I know i can calculate how much space the header takes with js, but a css solution would be better.

I tried floating the header but it didn't help.

Note that the aspect ratio of the image does not have to be preserved.

Answer 1

HTML

<div class="container" style="width: 100%; background-color: red;">

    <div class="left" aspect="2">
    </div>

    <div class="right" aspect="1">
        <h2>this a test header</h2>
    </div>

</div>

CSS:

div {box-sizing: border-box; color: white;}

        img {margin: 0px; padding: 0px;}

        div.left {background-color: black; border-right:solid 10px orange; float: left; width: 66.6666%;  }
        div.right {background-color: green; border-left:solid 10px orange; float: right; width: 33.3333%;  overflow: hidden;}
        div.right{

            background-image: url("http://promundoglobal.org/wp-content/uploads/2014/12/images.jpg");
            height: 300px;
            width: 300px;
        }

https://jsfiddle.net/Loeapap1/12/