Height Calculation By Browsers : Containing Blocks and Children

by

The height CSS property on MDN:

Percentages

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. A percentage height on the root element is relative
to the initial containing block.

In 1., the height attribute of the parent isn’t explicitly specified, therefore the value computes to auto.

In 2., the height attribute is specified and therefore it’s calculated with respect to the parent

More Related Contents:

  1. Blank Space To Right Of Webpage? (Hidden min-width?) [closed]
  2. div 100% width with other div fixed
  3. How to design an HTML/CSS signature that will work in Outlook 2016? [duplicate]
  4. Trying to work on responsiveness of login form
  5. How to align 3 divs (left/center/right) inside another div?
  6. CSS: Width in percentage and Borders
  7. Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, …) with css?
  8. Why does position:relative; appear to change the z-index?
  9. Align an element to bottom with flexbox
  10. Does opacity:0 have exactly the same effect as visibility:hidden
  11. :after and :before CSS pseudo elements hack for Internet Explorer 7
  12. Flexbox and Internet Explorer 11 (display:flex in ?)
  13. Is it possible to style a mouseover on an image map using CSS?
  14. Floating an image to the bottom right with text wrapping around
  15. HTML: Changing colors of specific words in a string of text
  16. How to change content on hover
  17. How can I style a file input field in Firefox?
  18. How to prevent text in a table cell from wrapping
  19. Font Awesome icons are not working, I have included all required files [closed]
  20. Half circle with CSS (border, outline only)
  21. Flexbox resize and scrollable overflow [duplicate]
  22. How do I make Firefox auto-refresh on file change?
  23. Tooltip with HTML content without JavaScript
  24. Change color of one character in a text box HTML/CSS [duplicate]
  25. Second line in li starts under the bullet after CSS-reset
  26. Stretching tag to fill entire
  27. Blank iFrame in IE
  28. How position absolute and fixed block elements get their dimension?
  29. Ring-shaped process spinner with fading gradient effect around the ring
  30. text-decoration not working for visited state link

Leave a Comment