Html CSS将高度设置为%而不是em会导致div元素消失_Html_Css

Html CSS将高度设置为%而不是em会导致div元素消失

html css

Html CSS将高度设置为%而不是em会导致div元素消失,html,css,Html,Css," 老实说，我对CSS和HTML很陌生，我以前用过，但我对嵌套元素之类的东西不太有经验，所以毫无疑问我在这里做错了什么我希望我的页眉和页脚的高度是页面的10%，内容是80% 我已经将这些元素的宽度设置得很好，所有这些都是使用百分比来工作的，但是高度不是在玩球这是我的html： <body id="<%= params[:controller].parameterize %>_controller"> <div class="header"> </

" 老实说，我对CSS和HTML很陌生，我以前用过，但我对嵌套元素之类的东西不太有经验，所以毫无疑问我在这里做错了什么

我希望我的页眉和页脚的高度是页面的10%，内容是80%

我已经将这些元素的宽度设置得很好，所有这些都是使用百分比来工作的，但是高度不是在玩球

这是我的html：

<body id="<%= params[:controller].parameterize %>_controller">

<div class="header">

</div>

<div class="content">
    <p>lol</p>
</div>

<div class="footer">

</div>

</body>

}

现在，上面显示了每个元素的大小，页眉/页脚为5em，内容为50em。我现在想要这些百分比：

body {
  /*light gray */
  background-color: #CCCCFF;
  height: 100%;
  width: 100%;
  margin: 0;

}

h1 {
  padding-top: 1em;
  text-align: center;
}

h3 {
  padding-top: 1em;
  text-align: center;
}

/* Application layout classes */
.header {
  height: 10%;
  background-color: #115859;
  width: 95%;
  margin-right: auto;
  margin-left: auto;
}

.footer {
  height: 10%;
  background-color: #115859;
  width: 95%;
  margin-right: auto;
  margin-left: auto;
}

.content {

  height: 80%;
  background-color: #000000;
  width: 95%;
  margin-left: auto;
  margin-right: auto;

}

页眉和页脚现在不再可见，内容实际上是一个大约1行高的黑色矩形

有人能看出我做错了什么吗

jsiffle链接：

看看这个：

要设置百分比高度，请选择其父元素（*）必须有一个明确的高度。这是不言而喻的，因为如果将“高度”保留为“自动”，则块将采用其内容的高度……但如果内容本身有一个以父对象百分比表示的高度，则会让自己有点不适。浏览器放弃，只使用内容高度。”

你需要这个：

html,body {height:100%;}

更新样本：

谢谢！我不知道可以向html标记添加样式，我认为这只是关于内容类型的信息。我不经常编写web应用程序。谢谢。如果对你有用，你介意接受这个答案吗？

html,body {height:100%;}