时间戳

首页 > 解决方案 > CSS Grid 模板行值不会改变

css - CSS Grid 模板行值不会改变

问题描述

我遇到了 CSS Grid 的问题（我刚开始学习它）。当我grid-template-rows:在 em 中输入 my 的值时，它工作得很好。但是如果我使用百分比，所有行都是相同的高度。我曾经给它们： 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>

标签： csslayoutcss-grid

解决方案

It is because your #Wrapper doesn't have a specified height or parent height. You can't use % as unit when the parent's height is not specified. Height in em is working since em is a absolute unit relative to parent px.

Define the height of the #Wrapper will be good to go.

#Wrapper{
  height: 500px;
}

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

推荐阅读