<div> 响应式方块网格的布局问题

Question

我在彩色背景上有一个由响应式方块组成的网格 <div>。 bottombar <div> 不在正方形网格下方，而是与背景顶部内嵌，我做错了什么？

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

正如 GCyrillus 在他的评论中所问；你真的需要绝对定位吗？

我删除了它，并将 overflow: hidden; 添加到 #squarecontainer，一切似乎都按预期工作。

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

编辑：基本上和这个一样。这个怎么样？

<div> 响应式方块网格的布局问题

<div> layout issue with a grid of responsive squares

html

css

responsive