Le 1 juil. 2014 à 20:57, Lixo Aqui <lixoa...@netcabo.pt> a écrit :
> Take a look at my example: http://jsfiddle.net/nn2N7/ > > In summary I have 2 siblings, one with 100px height and another with 100%. I > was expecting the 100% div to only fill the available space after subtracting > the 100px. Instead it assumes 100% height of parent block level element which > means any sibling will cause problems. > >> From what I read, this is the way it works, period. I can fix this using >> calc(100% - 100px) for my height. > > My doubt is more about the reasoning behind this. I would really expect the > 100% height to be calculated taking into account the sibling, otherwise > height 100% simply doesn't work when there are more than 1 sibling. It just > doesn't make sense to me. > > As a more experienced user in CSS I want to understand if this is just a > "weird" think on the specification or am I thinking it wrong? >From the CSS 2.1 spec, 10.5 Content height: the 'height' property: > <percentage> > Specifies a percentage height. The percentage is calculated with respect to > the height of the generated box's containing block. http://www.w3.org/TR/CSS21/visudet.html#the-height-property So yes, your height: 100% is calculated based on the height of the parent box. Nothing weird or bizarre about this. It works the same as the width property, fwiw, in your example case. You can use calc(), or you can consider the flex box module. The former has broader support across browsers. Philippe -- Philippe Wittenbergh http://l-c-n.com ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
