Re: [css-d] Why is height 100% div pushed by sibling
Le 1 juil. 2014 à 23:40, Lixo Aqui a écrit : > 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. Something like this should get you started: http://dev.l-c-n.com/_temp/flex-cssd20140702.html (should work in Safari 6.1/7 & Mobile Safari on iOS7, Firefox 28+, IE10+, Bink based 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/
Re: [css-d] Why is height 100% div pushed by sibling
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 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: > > > > 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/
Re: [css-d] Why is height 100% div pushed by sibling
Le 1 juil. 2014 à 20:57, Lixo Aqui 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: > > 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-d] Why is height 100% div pushed by sibling
Hi all, 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? Thanks in advance, -- A Santos __ 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/
