CSS 在 Ionic2 中设置离子行高度大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45476976/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set ion-row height size in Ionic2
提问by Debo
I need 3 horizontal rows in my page: the first row containing 3 columns, 2nd containing 2 and the 3rd containing 1; however I am unable to set the height of the rows. It all should be of same size and occupy the whole content area. The below code will make the rows occupy only a small portion of the content area. If I specify the height of the row class in % it is not changing; however in pixels it is working, but I don't want my code to be this rigid. Thanks in advance for any help!
我的页面中需要 3 个水平行：第一行包含 3 列，第二行包含 2，第三行包含 1；但是我无法设置行的高度。它都应该具有相同的大小并占据整个内容区域。下面的代码将使行仅占据内容区域的一小部分。如果我以 % 指定行类的高度，它不会改变；但是以像素为单位它正在工作，但我不希望我的代码如此僵化。在此先感谢您的帮助！
<ion-content>
<div style = "height : 37%; width : 83px; width : 100%; padding : none; border-bottom: 1px solid #D8DFEC; margin : none; background-size: 100% 100%; background-position: center; background-image: url('images/MyHome.PNG'); border-top: 1px solid #D8DFEC; border-bottom: 1px solid #D8DFEC"></div>
<ion-grid>
<ion-row text-center>
<ion-col col-4>A</ion-col>
<ion-col col-4>B</ion-col>
<ion-col col-4>C</ion-col>
</ion-row>
<ion-row text-center>
<ion-col col-4>D</ion-col>
<ion-col col-4>E</ion-col>
</ion-row>
<ion-row text-center>
<ion-col col-4>F</ion-col>
</ion-row>
</ion-grid>
</ion-content>
回答by sebaferreras
I'm pretty sure that the problem is that setting the height of each row by using a percentage value, is relative to the height of the container (the ion-grid). So you can do that by first setting the height of the grid to be the 100% of the content, and then you can set the height of the rows to be 33%:
我很确定问题在于使用百分比值设置每行的高度是相对于容器的高度（ion-grid）。因此，您可以首先将网格的高度设置为内容的 100%，然后将行的高度设置为 33%：
ion-grid {
height: 100%;
ion-row {
height: 33.33%;
}
}
You can take a look at this working plunker
你可以看看这个工作的plunker
(Note: In the plunker the styles has been placed inline in the html code just to make the demo easier. They should be placed in the page.scssfile corresponding to that page)
（注意：在plunker中，样式已内联放置在html代码中，只是为了使演示更容易。它们应放置在该page.scss页面对应的文件中）
