我目前正在自学如何设置一个响应网格布局，将自动调整设备大小。到目前为止还不错，但我有一个问题，一些盒子的高度并没有调整。代码http://jsfiddle.net/shuka/tbe32q3h/
html格式
<body>
<div id="section2">
<div class="container grid2">
<article class="col half">MAP</article>
<article class="col half" style="background-color:#069;">
<div class="grid2">
<article class="col quater">BOX 1</article>
<article class="col quater">BOX 2</article>
</div>
<div class="grid2">
<article class="col quater">BOX 3</article>
<article class="col quater">BOX 4</article>
</div>
</article>
<br/>
</div>
CSS
body {
margin: 0;
padding: 0;
}
#section1 br,#section2 br,#section3 br, #topbar br {
clear: both;
}
.container {
margin: auto;
max-width: 1400px;
overflow:hidden;
}
.col {
background: #eee;
float: left;
margin-left: 1.4%;
margin-bottom: 20px;
}
.grid2 .col {
width: 49.3%;
}
.grid2 .half {
/*width: 48.4%;*/
height:49.3vw;
/*max-width:678px;*/
max-height:690px;
/*float:left;*/
position:relative;
}
.grid2 .quater {
margin-left: 2.1%;
margin-bottom: 2.1%;
width: 48.95%;
height:48.95vw;
/*max-width:317px;*/
max-height:338px;
/* float:left;*/
position:relative;
}
.grid4 .col:nth-of-type(4n+1), .grid3 .col:nth-of-type(3n+1), .grid2 .col:nth-of-type(2n+1) {
margin-left: 0;
clear: left;
}
正如您在调整大框大小时所看到的，但是问题在于4个小框的宽度会改变，但高度不变。我希望这四个盒子保持正方形，但当屏幕大小调整时变小，如果有人能发现我错过的东西，非常感谢。
干杯
舒卡
最佳答案
这是一个棘手的布局，但我做了一个小游戏，我想我有一些东西，将为你工作：
http://jsfiddle.net/CaseyRule/h0drc99g/
我决定用硬编码数字来处理最大宽度方案，如下所示：
@media (min-width: 900px) { /* max-width of container */
.half {
height: 450px; /* max-width * 50% */
}
.half.col1 {
width: 432px; /* max-width * 48% */
}
.half.col2 {
width: 450px; /* max-width * 50% */
}
.quarter {
width: 216px; /* max-width * 24% */
height: 216px; /* max-width * 24% */
}
.half.col1, .quarter.col1 {
margin-right: 18px; /* max-width * 2% */
}
.row1 .quarter {
margin-bottom: 18px; /* max-width * 2% */
}
}
我以900px的最大宽度完成了这个操作，这样您就可以在jsfiddle屏幕中看到它是如何更容易地工作的，但是很容易将它更改为1400px，正如您最初所做的那样。只需更改容器的最大宽度，并计算媒体查询中的数字，如注释所示。或者，您可以使用LESS这样的预处理器自动完成所有这些计算，我强烈建议您这样做。
关于html - CSS响应式嵌套网格高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26846414/