html - Creating a 2x2 fluid layout and fill the entire screen -

i'm having hard time trying figure out how tackle seemingly simple problem. have request make 2x2 box layout fill entire screen, break down single column @ width.

the breaking down part isn't problem, it's 2x2 grid fluid i'm struggling with.

i've attempted using this:

.outer-div{   display: table;   width: 100%;   height: 100%; } .inner-div{   display: table-row;   width: 100%;   height: 100%; } .inner-block{   display: table-cell;   width: 50%;   height: 100%; } 

this sort of works, doesn't seem fluid. @ least, not expect. there better way accomplish this? ideas appreciated!

(picture attached visual reference)

edit ok, feel idiot. solution had working, problem have div display content absolute positioned , fixed height i'm not sure how account for. please see fiddle example: https://jsfiddle.net/q2j940r1/1/

the key set container elements height:100%, including html , body tags. , set 50% of width , height each item.

jsfiddle example

html, body {      height: 100%;  }  body {      margin: 0;  }  .container {      font-size: 0; /*fix inline gaps*/      height: 100%;  }  .item {      font-size: 16px; /*reset font size*/      display: inline-block;      vertical-align: top;      width: 50%;      height: 50%;      position: relative;      overflow: auto; /*for scrollbar*/  }  .content {      position: absolute;      left: 0; right: 0; top: 0; bottom: 0; /*stretch , fill*/  }  .item:nth-child(1) { background: aqua; }  .item:nth-child(2) { background: lime; }  .item:nth-child(3) { background: gold; }  .item:nth-child(4) { background: teal; }

<div class="container">      <div class="item">          <div class="content">a - lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>      </div>      <div class="item">b</div>      <div class="item">c</div>      <div class="item">d</div>  </div>