In CSS, how to compute the percentage height within a `height:auto` parent?


Tags: html,css

Problem :

CSS

#parent {
  height: auto;
}

#child {
  height: 10%;
  width: 75%;
}

HTML

<div id="parent">
  <div id="child">
    <span>I'm one tenth the height of my parent.</span>
  </div>
</div>

Is this a forbidden or wrong usage? This is a bit confusing because child relies on the parent's height to calculate its own height, and the parent also relies on the child's height to calculate the height:auto..

How will the browser compute the height for the child and parent element for the above codes?



Solution :

This is a bit confusing because child relies on the parent's height to calculate its own height, and the parent also relies on the child's height to calculate the height:auto..

Exactly, so the browser doesn't bother with the percentage at all. From the spec:

<percentage>
[...] 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'.

So the computed height for both elements is auto.


    CSS Howto..

    how to position links at the bottom in a fixed height list

    How to disable fixed header on Mobile with CSS

    how to keep the css style after inserting a row to table by jquery

    How can I change this HAML format to normal CSS style?

    How can I see “:hover” and “:active” properties of elements on a webpage? [duplicate]

    How do you make Static tool tip with CSS?

    how to put a css class inside of a css class?

    How to blur the div below the section with CSS 3 without background image?

    CSS. Parent > Child1:hover. How to display Parent > Child2?

    How to center the Nav-Bar

    How to draw a responsive shape [closed]

    How to change CSS of ng-view when triggering CSS in ng-include

    css - how to get floated divs to stack when you zoom in

    Rails How to include a scss file in a specific erb view? [duplicate]

    How to select nth child with css? [duplicate]

    How to make video responsive for all the screen sizes?

    Button on ng-mouseover & ng-mouseleave won't get shown as expected - AngularJS

    HTML+Javascript: How can I Load Data in Div via Class?

    How to place the text in the top right corner and not show buttons when printing

    How to define cellspacing in CSS

    How to centre my CSS menu?

    How can I push the first row of images down?

    How to version files in the section?

    How do I achieve a hover over image effect?

    text-rendering in css, what is it? and how to use it?

    How to increase the duration of :active in css?

    How to make images always relative to a div using CSS

    how to move this navigation bar to the right

    How to properly center a 100% width div in css

    How do I do rounded corners in CSS in Google Chrome