设置浮动div的高度以填充其下方的区域

Question

I have many DIVs in my content div, some of them float right and some float left on screen larger than 400px.

Working fiddle is https://jsfiddle.net/cmbpt1hd/

I want height of area-three so that it fills all area under it on screens larger than 400px

Keep in mind

1. There may be many DIVs above area-three that float right.
2. There may be many DIVs in content div that float left.

CSS solution will be preferred.

My code

 #content { box-sizing: border-box; width: 100%; } .area-one { box-sizing: border-box; float: right; width: 30%; background-color: #ffa2a2; padding: 8px; } .area-two { box-sizing: border-box; float: left; width: 70%; background-color: #a4dca4; padding: 8px; } .area-three { box-sizing: border-box; float: right; width: 30%; background-color: #8282ff; padding: 8px; } #footer { clear: both; width: 100%; background-color: #ff8282; } @media only screen and (max-width: 400px) { .area-one, .area-two, .area-three { float: none; width: 100%; } } 

 <div id="content"> <div class="area-one"> Area-one, Area-one. </div> <div class="area-two"> Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two. </div> <div class="area-three"> Area-three, Area-three. </div> </div> <div id="footer"> Footer, Footer, Footer. </div> 

Here is what I want

Answer 1

Take a look at flex-box, and splitting your HTML up so you have the left-side divs and the right-side divs wrapped in their own divs:

If you wrap your floating divs you don't have to give each of them a width and a float, and you can more freely add new divs.

Flex-box is great for filling out empty space or making divs distribute evenly.

 #content { box-sizing: border-box; width: 100%; display:flex; } .area { box-sizing:border-box; float:left; clear:left; width:100%; padding: 8px; flex-grow:1; } .area-one { background-color: #ffa2a2; } .area-two { background-color: #a4dca4; flex-grow:0; } .area-three { background-color: #8282ff; } #footer { clear: both; width: 100%; background-color: #ff8282; } .float-left { width:70%; } .float-right { width:30%; } .float-box { display:flex; float:left; flex-direction:column; } @media only screen and (max-width: 400px) { .float-left, .float-right { float: none; width: 100%; display: block; } #content { display:block; } } 

 <div id="content"> <div class="float-box float-left"> <div class="area area-one"> Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. </div> </div> <div class="float-box float-right"> <div class="area area-two"> Area-two, Area-two. </div> <div class="area area-three"> Area-three, Area-three. </div> </div> </div> <div id="footer"> Footer, Footer, Footer. </div> 

Answer 2

jQuery solution:

 function getHeight() { if ($(window).width() >= 400) { var areaOne = $('.area-one').height(); var areaTwo = $('.area-two').height(); var h = areaTwo - areaOne; $('.area-three').css('minHeight', h); } else { $('.area-three').removeAttr('style'); } } getHeight(); $(window).on('resize', function() { getHeight(); }); 

 #content { box-sizing: border-box; width: 100%; } .area-one { box-sizing: border-box; float: right; width: 30%; background-color: #ffa2a2; padding: 8px; } .area-two { box-sizing: border-box; float: left; width: 70%; background-color: #a4dca4; padding: 8px; } .area-three { box-sizing: border-box; float: right; width: 30%; background-color: #8282ff; padding: 8px; } #footer { clear: both; width: 100%; background-color: #ff8282; } @media only screen and (max-width: 400px) { .area-one, .area-two, .area-three { float: none; width: 100%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content"> <div class="area-one"> Area-one, Area-one. </div> <div class="area-two"> Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two. </div> <div class="area-three"> Area-three, Area-three. </div> </div> <div id="footer"> Footer, Footer, Footer. </div> 

JSFiddle