Javascript 带有GridLayout和按钮的HTML页面

我有以下问题： CSS-FILE: 我有一个网站，我分为两部分。顶部（grid.full）使用86%的屏幕，底部（grid.bott）使用14%的屏幕。（grid.full和grid.bott在css文件中） HTML文件 我想在底部插入一个按钮（在CSS:grid.bott中）。因此grid.bott在css文件中定义为14%高度。我的按钮插入到表格中，并在CSS（.buttbott）中定义。如何调整按钮的高度，使其与底部一致。我希望按钮高度为底部尺寸的80%。底部离屏幕的高度为14%

.wrapper{
身高：100%；
}
/*网格*/
.电网{
底部：0；
位置：绝对位置；
排名：0；
宽度：100%；
}
/*使用屏幕的43%*/
.grid.span{
背景：白色；
框大小：边框框；
浮动：左；
身高：43%；
位置：相对位置；
宽度：100%；
/*3列*/
}
/*使用86%的屏幕*/
.网格，满了{
背景：白色；
框大小：边框框；
浮动：左；
身高：86%；
位置：相对位置；
宽度：100%；
/*3列*/
}
/*使用屏幕的14%*/
.grid.bott{
背景：#fdc400；
浮动：左；
身高：14%；
位置：相对位置；
宽度：100%；
/*3列*/
}
/*底部按钮*/
巴特博特先生{
边框：1px蓝色；
背景色：暗灰色；
高度：110px；
宽度：110px；
光标：指针；
边界半径：10px；
字体大小：110%；
字体大小：粗体；
}

测试页

要使按钮的高度为

.bott

元素高度的80%，我们首先需要定义

.bott

元素中其他元素的高度。即：

.container,
#buttons,
#buttons tr {
  height: 100%;
}

然后我们可以将按钮的高度设置为

80%

/* Buttons für BOTTOM */

.buttbott {
  height: 80%;
}

以下是完整的演示：

.wrapper{
身高：100%；
}
/*网格*/
.电网{
底部：0；
位置：绝对位置；
排名：0；
宽度：100%；
}
/*使用屏幕的43%*/
.grid.span{
背景：白色；
框大小：边框框；
浮动：左；
身高：43%；
位置：相对位置；
宽度：100%；
/*3列*/
}
/*使用86%的屏幕*/
.网格，满了{
背景：白色；
框大小：边框框；
浮动：左；
身高：86%；
位置：相对位置；
宽度：100%；
/*3列*/
}
/*使用屏幕的14%*/
.grid.bott{
背景：#fdc400；
浮动：左；
身高：14%；
位置：相对位置；
宽度：100%；
/*3列*/
}
.货柜，
#按钮，
#按钮tr{
身高：100%；
}
/*底部按钮*/
巴特博特先生{
边框：1px蓝色；
背景色：暗灰色；
身高：80%；
宽度：110px；
光标：指针；
边界半径：10px；
字体大小：110%；
字体大小：粗体；
}

测试页

谢谢你的回答。我认为这个解决办法行不通。当我以整页模式显示示例时，按钮没有.bott元素.Odd的80%高度。当我在整页中查看时，显示为80%。我看到的是——我想问题是，我使用的是Firefox57。有了ie 11，它就可以工作了。我如何调整它，使之与这两种情况一起工作？你能解释一下解决办法吗？我是css网格新手这里没有css

grid

的使用，至少在问题的代码中是这样。在最初的问题中，CSS没有提到这一点吗？好的。不，我没有遗漏任何东西。但为什么internet explorer和firefox之间有区别呢？在firefox中，它不起作用