Thanks for the clarification.
I'm just learning about the flex box module, do you think you can provide an
example of a solution using flexbox?
Because my fix only works if my first sibling has a fixed height which is not
always the case so what I want is 1 children to take as much height as needed
by its text content and then the sibling to use up all the remaining space.
Thanks in advance,
-- A Santos
> From: e...@l-c-n.com
> Date: Tue, 1 Jul 2014 21:48:05 +0900
> To: lixoa...@netcabo.pt
> CC: css-d@lists.css-discuss.org
> Subject: Re: [css-d] Why is height 100% div pushed by sibling
>
>
> 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/
______________________________________________________________________
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/
