如何在浏览器中的所有可用空间上渲染div

Question

仅仅是为了实验，我尝试了简单的html ccs snnipet。

这是小提琴https://jsfiddle.net/u768afb3/

但它没有填补空间。我需要做什么？

CSS

html body
{
     heigth:100%;
     width: 100%;
     margin: 0;
     padding: 0;
}

div.layout{
    border: 1px greay solid;
    heigth:100%;
    width: 100%;
}

HTML

<div class="layout"></div>

Answer 1

1. 它是CSS，而不是CCS;
2. HTML和BODY的选择器必须为html, body而不是html body;
3. 它是height，而不是heigth;
4. 它是2px gray solid;，而不是2px greay solid;;

之后一切正常：

＆＃13;
＆＃13;
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
div.layout {
  border: 2px grey solid;
  height: 100%;
  width: 100%;
}
＆＃13;
<div class="layout">

</div>
＆＃13;
＆＃13;
＆＃13;