RE: Suggestion: Introduce new height property value for full fitting space

> From: brille1@hotmail.com 
> Date: Wed, 12 Mar 2014 15:13:34 +0100 
> 
> See here: 
> http://stackoverflow.com/questions/15999282/css3-how-can-i-set-middle-div-to-maximum-height 
> 
> 
> I suggest to introduce a new literal keyword to the “height” property. 
> 
> This new keyword is supposed to set the height of a box element to the 
> maximum possible value after 
> subtracting all the heights of sibling boxes from the viewport height, 
> thus the box will exactly fit the 
> viewport’s height. 
> 
> The minimum height of such box, however shall be the minimum height 
> necessary to show its full content. 
> 
> I suggest the new height literal value to be named “fit”. 
> 
> If more than a single sibling box has the “fit” value assigned to its 
> “height” property, and if there 
> is still room left in the viewport after adding all of those boxes’ 
> minimum heights plus their sibling 
> boxes’ heights, then the remaining height shall be distributed between 
> all “fit” boxes. 

Here is an example of how you can do this with Flexbox [1] which works in current Internet Explorer (11), Firefox (27) and Chrome (33): http://jsfiddle.net/bqurA/1/

Flexbox is already quite well supported in browsers [2] and polyfills exist [3] for others.

[1] http://www.w3.org/TR/css3-flexbox/
[2] http://caniuse.com/flexbox
[3] http://flexiejs.com/

-- 
James Ross <james@james-ross.co.uk> 		 	   		  

Received on Wednesday, 12 March 2014 15:51:02 UTC