CSS 响应式嵌套网格高度答案

【问题标题】：CSS responsive nested grid heightCSS 响应式嵌套网格高度
【发布时间】：2015-01-06 21:51:59
【问题描述】：

我目前正在自学如何设置响应式网格布局，该布局将自动调整设备尺寸。到目前为止一切都很好，但我遇到了一些盒子的高度没有调整的问题。代码见这里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 个较小的框，宽度会发生变化，但高度保持不变。我希望四个框保持正方形，但在调整屏幕大小时会变小，如果有人能发现我错过的东西，不胜感激。

干杯舒卡

【问题讨论】：

看看this jquery
高度正在为我调整...
@mevius 四个小盒子是不是保持正方形？
这是您需要的吗？如果我正确理解您的目的，请告诉我。
@CaseyRule 很好，可以做到，谢谢，我不得不稍微改变结构，以便它可以在小屏幕上调整，所以每个框都是 100% 的宽度。

标签： html css responsive-design

【解决方案1】：

这是一个棘手的布局，但我做了一些尝试，我想我有一些适合你的东西：

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% */
    }
}

我这样做的最大宽度为 900 像素，这样您就可以在 jsfiddle 屏幕中更轻松地看到它是如何工作的，但是很容易将其更改为 1400 像素，就像您最初拥有的那样。只需更改容器的最大宽度，并按照 cmets 中的指示计算媒体查询中的数字。或者，您可以使用 LESS 之类的预处理器自动执行所有这些计算，我强烈建议您这样做。

【讨论】：