CSS Grid模板行的值不变

Question

我在CSS Grid上遇到了问题（我刚刚开始学习它）。当我在em中输入grid-template-rows:的值时，它可以正常工作。但是，如果我使用百分比，则所有行的高度都相同。我以前给他们：10％80％10％：header, main, footer,，但由于某些原因，它们都一样大。如果将Wrapper高度（网格容器元素）从％更改为em或其他任何值，都没有什么不同。这是我的代码：

  
    #Wrapper {
    	display: grid;
    	grid-template-columns: 20% 60% 20%;
    	grid-template-rows: 10% 80% 10%;
    	min-height: 20em;
    	grid-template-areas:
    		"header header header"
    		"main main main"
    		"footer footer footer"
    		
    }
    
    header {
    	background-color: #593093;
    	grid-area: header;
    
    }
    
    main {
    	background-color: #2AABBB;
    	grid-area: main;
    
    }
    
    footer {
    	background-color: #2F6692;
    	grid-area: footer;
    
    }
    
    
    h3 {
    	margin: 0;
    }

    	<div id="Wrapper">
    		<header>
    			<h3>Header</h3>
    
    		</header>
    		<main>
    			<h3>Main</h3>
    		</main>
    		<footer>
    			<h3>Footer</h3>
    
    		</footer>
    	</div>

    
    
  

Answer 1

这是因为您的#Wrapper没有指定的身高或父母身高。如果未指定父母的身高，则不能使用%作为单位。由于em是相对于父级em的绝对单位，因此px中的高度有效。

定义#Wrapper的高度会很好。

#Wrapper{
  height: 500px;
}

https://codepen.io/anon/pen/KrMwQM