<main>元素没有取其父高

Question

我使用chrome devtool删除了所有不必要的DOM元素。

正文是相对的，并占用文档中的所有可用空间。这就是我想要的。

我的工具栏是相对的，并采取我想要的高度：

问题来自我的<main>元素

此元素是相对的，具有height: 100%属性。如果我的理解是好的。 <main>应该占其父母的100％。这里的父亲是body。因此<main>应占用可用空间。

就我而言：

<main>元素的高度为0。

你能解释它的来源吗？如何让这个<main>元素占用可用空间？

由于

Answer 1

html,body{
  height:100%;
  margin:0;
  padding:0;
}

将display:block;属性分配给main标记，因为它无法在IE中使用

main{
     display:block;
   }