How to split page into 4 equal parts?

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

div {
  width: 50%;
  height: 50%;
  float: left;
}

#div1 {
  background: #DDD;
}

#div2 {
  background: #AAA;
}

#div3 {
  background: #777;
}

#div4 {
  background: #444;
}

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>