CODEWITHSUNDEEP
htmlcssgoogle-chrome
Drew Gaynor
Drew Gaynor

Reputation: 8472

CSS: Chrome interprets div with % height nested in div with min-height differently from other browsers

I have the following page:

    <!DOCTYPE html>
    <html>
    <head>
        <style type="text/css">
            html, body
            {
                height:100%;
            }
            #outer
            {
                width:80%;        
                min-width:600px;
                height:80%;
                min-height:600px;
                margin: 0 auto;
                border:2px dashed red;
            }
            #inner
            {
                height:100%;
                width:100%;
                border:2px dashed blue;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">          
            </div>
        </div>
    </body>
    </html>

My expectation is that inner div will remain 100% of the height of the outer div once the min-height is hit (both will be 600px). This is the case in IE9 and FF8. I think that this is correct, based on the W3C: http://www.w3.org/TR/CSS2/visudet.html#the-height-property.

From the W3C page:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

My parent element has an explicitly specified height, so no need for the absolute positioning, I would think. (For what it's worth, absolutely positioning the outer div does solve the problem- but it shouldn't be necessary.)

In Chrome, however, the inner div shrinks with the resizing of the window after the min-height on the outer div is hit, instead of remaining 100% of the height of the outer div, 600px;

I guess I have two questions: which interpretation is correct? Is there a workaround for this?

Upvotes: 2

Views: 3919

Answers (1)

Alexey Ivanov
Alexey Ivanov

Reputation: 8236

Workaround part is easy:

  1. Easiest way is to add "min-height: 600px;" (or "min-height: inherit;") to the #inner too.

  2. If for some reason you need to for some reason inherit it from parent you can do following:

    1. Add "position: relative;" to #outer.
    2. Add "position: absolute; top: 0; right: 0; bottom: 0; left: 0;" and remove "width: 100%; height: 100%;" from #inner.

About the right interpretation: It's a bug. You can read more about this in answers to this question: The inherited height of a child div from a parent with a min-height attribute

Upvotes: 2

Related Questions