<div>响应正方形网格的布局问题

Question

I have a grid of responsive squares over a colored background <div> . What am I doing wrong that the bottombar <div> isn't below the grid of squares and instead inline with the top of the background?

CSS:

#container {
    width: 100%;
    height: 100%;
    position: relative;
}

#squarecontainer, #infoi {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#squarecontainer {
  z-index: -1;
  background-color:yellow;
}

#infoi {
   z-index: 2;
   background-color:blue;
}

.square {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit  */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko         */
  box-sizing: border-box; 
  float:left;
  position:relative;
  width:50%;
  padding-bottom:50%;
  border: 1px solid #FFF;
  background-color:#7F3F98;
  /* RGBa with 0.9 opacity */
  background-color: rgba(127, 63, 152, 0.9);
  /* For IE 5.5 - 7*/
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E67F3F98, endColorstr=#E67F3F98);
  /* For IE 8*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E67F3F98, endColorstr=#E67F3F98)";
  overflow:hidden;
}

.table{
    display:table;
    height:100%;
    width:100%;
}

.content {
  position:absolute;
  height:90%;
  width:90%;
  padding: 5%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size:160%;
  font-size:5vw;
  color: #fff;
}

#cell4 {
  visibility:hidden;
}

#bottombar {
  clear:both;
  position:relative;
}

HTML:

<div id="topbar">Topbar information here</div>
<div id="container">
    <div id="squarecontainer">
      <div class="square" id="cell1">
        <div class="content">
        Div 1
        </div>
      </div>
      <div class="square" id="cell2">
        <div class="table">
        <div class="content">
        Div 2
        </div>
        </div>
      </div>
      <div class="square" id="cell3">
        <div class="content">
        Div 3
        </div>
      </div>
      <div class="square" id="cell4">
        <div class="content">
        Div 4
        </div>
      </div>
    </div>
    <div id="infoi">Floating text here</div>
</div>
<div id="bottombar">Bottombar info here</div>

jsfiddle: http://jsfiddle.net/8o643xqx/7/

Answer 1

As GCyrillus asked in his comment; Do you really need absolute positioning?

I removed it, and added overflow: hidden; to #squarecontainer , and everything seems to be working as expected.

http://jsfiddle.net/8o643xqx/9/

EDIT : Basically the same thing with this one. How's this?