W3C home > Mailing lists > Public > www-style@w3.org > November 2014

Re: Treating 'calculated' height as 'specified' height when computing max-height and min-height

From: Greg Holmes <gregh99@gmail.com>
Date: Thu, 13 Nov 2014 13:45:35 -0500
Message-ID: <CAPrkZWmfmYPjm2qO8Em++0NE4O6Q3uFCV76zseVtkkcmQDpy1Q@mail.gmail.com>
To: Robert Hogan <robhogan@gmail.com>
Cc: www-style list <www-style@w3.org>
My take is that the FF/IE behaviour is correct (the img should be 100px
high), since by using "top:0; bottom:0;" on #inner, the author is
indicating that the height of #inner is intended to be the same as #outer,
without having to repeat "height:100px;".

If EITHER "top" ONLY or "bottom" ONLY (or neither) were specified, then the
img would be 300px high.

For any value of "top" and "bottom" (lengths or percentages), if they are
BOTH specified, then #inner should be treated as if it's height were
explicitly defined.

e.g. If "top:5px; bottom:0px;" was specified on #inner, then that should be
equivalent to "top:5px; height:95px;".

This behaviour should also apply if, for example, "top:5px;" only was
specified in the CSS for #inner (img height would be 300px), and then
"bottom:0px;" was later added to #inner through a style change via
JavaScript (img height would then be 95px).

- Greg Holmes

On Thu, Nov 13, 2014 at 11:18 AM, Robert Hogan <robhogan@gmail.com> wrote:

> At https://crbug.com/422919 we have an interoperability difference
> between Blink and FF/IE we would like to sort out. In the following test
> case Blink renders the images as 300px high, while FF/IE render it as 100px
> high.
> <style>
> #outer {
>     height: 100px;
>     outline: 1px solid;
>     position:relative;
>     }
> #inner { top:0; bottom:0; position:absolute; }
> img { max-height: 100%; }
> </style>
> <div id="outer">
>     <div id="inner">
>         <img src="http://placehold.it/300x300" />
>     </div>	
> </div>
Received on Friday, 14 November 2014 08:40:06 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:48 UTC