height property in percents doesn't work
This question already has an answer here:
Just change min-height: 100% to height: 100% .
The height of your webpage will be 100% of the browser screen, or 100% of the content height, whichever is bigger.
When height is set on any element in a percentage, it's immediate parent element must have height specified (not as a percentage, but in px or em ).
The weird exception to that rule is the <html> element, which if it is given height: 100% , an immediate child element can then have height as a percentage (ie the <body> element).
As for setting min-height: 100% , this sets the initial size to 100% height and allows the element to exceed that height.
I'm pretty sure that min-height also follows the same above-mentioned rule for height -- for any element set with min-height in a percentage, its' immediate parent element must have height specified (not as a percentage), with the exception of the <html> element being set with height as a percentage.
However, if an element sets height as a px or em value, and its' immediate child element sets height as a percentage, the grandchild element's height can be set as a percentage, and so on...
下一篇: 以百分比表示的高度属性不起作用