11

I'm sorry if this is an old issue or a known problem, but I haven't been able to find an answer online. If I have the code

<style>
    html, body { height: 100%; width: 100%;}
    #div1 {height:50%; min-height:200px;background-color:red;}
    #div2 {height:100%; background-color:black;}
</style>
<body>
<div id="div1"><div id="div2"></div></div>
</body>

Then in firefox the black inner div shrinks as the screen shrinks and stops at 200px height. However in a webkit browser the red outer div stops but the inner div continue to shrink as if it was in a parent div without the min-height attribute.

Is there an easy fix to bring the webkit version into line with the firefox rendering? A min-height:inherit works if placed on the inner div, but in the case of many divs within one this would require min-height:inherit on each child div. Are there any more elegant solutions?

Wex
  • 15,539
  • 10
  • 64
  • 107
Phil
  • 1,110
  • 1
  • 9
  • 25

5 Answers5

25

Yes, this is a WebKit bug, bug 26559.

height in % on static-or-relative-positioned elements is calculated relative to the containing block's stated height property, instead of the calculated height taking min-height and max-height into account. The same does not occur for width.

You can sort of see where this comes from in CSS 2.1 which states that the height of a containing block must be explicitly set in order for % to work. But it's not explicitly stated what ‘explicitly’ means! Browsers have taken this to mean that the height property must be set to a non-auto value, which is fair enough except that height isn't all there is to height now. Other browsers allow min-height/max-height to affect the height to be used, but don't allow it to mean ‘explicit’. WebKit goes farther (and this definitely isn't mandated by spec) by using only height in the calcation and not min/max.

As a workaround, you could try absolute positioning, which isn't affected. Relative-position the outer div, absolute-position the inner at left: 0; top: 0; width: 100%; height: 100%.

bobince
  • 528,062
  • 107
  • 651
  • 834
  • 1
    Thanks for the answer, it's the first time I've found firefox and webkit's rendering to differ and it was driving me up the wall. – Phil Sep 30 '10 at 21:38
  • +1 for mentioning the CSS spec; that clears issues up for me. Interestingly, if you specify the child's height as `min-height: 100%` rather than `height: 100%`, it works -- but only in Opera. To my mind, this should be the proper behaviour, but not so, according to the spec. Perhaps someone should file a bug against the spec :) – Paul d'Aoust Aug 28 '13 at 20:24
3

I think it is only the differences between the two browser's default CSS. Try this:

<style>
    div {min-height: inherit;}
    #div1 {height:50%; min-height:200px;background-color:red;}
    #div2 {height:100%; background-color:black;}
</style>

It works for me.

Adam Wallner
  • 2,292
  • 23
  • 20
  • Yep that'll do the trick. If you're using span's and other tags you can use `#div1 * {min-height: inherit}` instead. Thank for the answer - it's a better fix than mine was! – Phil Sep 30 '10 at 21:35
1

Our project needs the image to be vertically and horizontally centered. And we need to make the image adjusted according to the screen size. I find that putting the image as background solve the issue:

<style>
    .parent {
        height: 100%;
    }
    .image {
        height: 100%;
        background: url('/path/to/your/image') no-repeat 50% 50%;
        -o-background-size: contain;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        background-size: contain;
    }
</style>
<div class="parent">
    <div class="image"></div>
</div>

Here 50% 50% makes the image horizontally and vertically centered. And background-size: contain ensures that the background doesn't exceeds the boundary of the parent (MDN background-size):

contain This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

In this way, the parent does not need to specify absolute units. Here height: 100% is enough.

One drawback is: the image will be enlarged to fill in the parent space.

Joy
  • 9,430
  • 11
  • 44
  • 95
0

I would like to post my solution as it took me a while to make my code work and perhaps somebody will find this useful despite the fact that this is an old topic...

I had a simillar problem. An image was overflowing from a parent flex-child block. This happened only in Chrome and Opera (webkit browsers), trident and gecko were smart enough to deal with the situation. I tried a few solutions here on stack overflow but none provided a direct solution so I have cross-invented a workaround by adding another container layer in between aforementioned image and parent. In the situation presented at the opening post it would look like:

<style>
    html, body { height: 100%; width: 100%;}
    #div1 {height:50%; min-height:200px;background-color:red; position: relative;}
    #div_fix {position: absolute; height: 100%; width: 100%;}
    #div2 {height:100%; background-color:black;}
</style>
<body>
<div id="div1"><div id="div_fix"><div id="div2"></div></div></div>
</body>

What this does is create a container (#div_fix) that receives static height and width that then can be properly used in webkit to calculate correct height in #div2. Please note that position:relative and position:absolute properties are mandatory for it to work.

And yes, it looks bad, but gets the job done :)

Radix Salvilines
  • 386
  • 5
  • 16
0

I had an issue with min-height on an empty div in Chrome (OSX 10.6). I don't know if it's the same bug behavior but I found my solution with changing the box-sizing attribute.

Not working in Chrome Mac:

box-sizing:border-box;
min-height:10px;
padding-bottom:15px;
padding-top:30px;

Working in Chrome Mac:

box-sizing:content-box;
min-height:10px;
padding-bottom:15px;
padding-top:30px;

Hope that helps.

Peter O.
  • 32,158
  • 14
  • 82
  • 96
mikmikmik
  • 500
  • 1
  • 5
  • 10