以百分比表示的高度属性不起作用
这个问题在这里已经有了答案：
只需改变min-height: 100%到height: 100% 。
您的网页高度将为浏览器屏幕的100％，或100％的内容高度，以较大者为准。
当在百分比中的任何元素上设置height ，它的直接父元素必须具有指定的height （不是以百分比形式，而是以px或em ）。
该规则的奇怪例外是<html>元素，如果该元素的height为height: 100% ，则直接子元素的height可以为百分比（即<body>元素）。
至于设置min-height: 100% ，这将初始大小设置为100％高度，并允许元素超过该高度。
我敢肯定， min-height也遵循上述相同的height规则 - 对于以百分比形式设置min-height任何元素，其“直接父元素必须具有指定的height （而不是百分比）”， <html>元素的例外情况是以height百分比来设置的。
但是，如果元素将height设置为px或em值，并且其立即子元素将height设置为百分比，则可以将该元素的height设置为百分比，等等...