height

set height explicitly

Avoid explicitly setting the height of an element to avoid overflow issues.

  • Specifying a % height is problematic.

  • % refers to the parent's size.

  • parent's height is typically determined by the height of its children. This produces a circular definition that the browser canโ€™t resolve, so itโ€™ll ignore the declaration.

height: 100%

  • For percentage-based heights to work, the parent must have an explicitly defined height. ๐Ÿ—ฃ Why doesn't height: 100% working?

  • ๅฆ‚ๆžœ้ƒฝๆ˜ฏ็”จ %๏ผŒๅ‰‡ไธ€่ทฏๅพž html โŸฉ body โŸฉ .... โŸฉ ๅˆฐ่‡ชๅทฑ็š„็›ดๅฑฌๆฏ็‰ฉไปถ้ƒฝ่ฆๆ˜Ž็ขบ่จญๅฎš %๏ผŒๅฆๅ‰‡ๅช่ฆไธญ้–“ๆœ‰ไธ€ๅฑคๆ–ทๆŽ‰ไนŸๆ˜ฏๆฒ’็”จใ€‚

/*
   ็•ถๆˆ‘ๅ€‘่จญๅฎš height: 100% ๆ™‚๏ผŒๆญค่จญๅฎšไธฆไธๆœƒ็œŸๆญฃ็™ผ็”Ÿไฝœ็”จ๏ผŒ
   ้™ค้žๅฎƒ็š„ๆฏ็‰ฉไปถๆœ‰ใ€Œๆ˜Ž็ขบ่จญๅฎšใ€heightใ€‚
   โญ๏ธ ๆณจๆ„๏ผš่จญๅฎšๆฏ็‰ฉไปถ็š„ min-height ไธฆๆฒ’ๆœ‰ๅนซๅŠฉโ—๏ธ
 */
i-vstack:only-child {
    height: 100%;
}

Last updated