带有最后一个元素的CSS列布局'；同等高度

我有一个3列的布局，我正试图用这个绘画插图向你们展示。 我希望每列的最后一个div占用剩余的空间（蓝色）

此布局的总体高度不是固定的，div的数量也不是固定的。 一些div将具有固定的维度，而其他div则没有

有没有一个纯粹的CSS解决方案？ 可能会帮你

它可以让您轻松地在Sass中创建响应网格，而Sass不是普通的css，但可以编译为响应网格。使用susy，如果您查看他们的主页（之前链接并包含在下面），他们会达到与您所寻找的类似的效果

下面是一个响应网格的基本示例，您可以感受到它有多么简单：

// Complex AG grid, brought to you by Susy:
.ag1 { @include span-columns(2,10); }
.ag2 { @include span-columns(6,10); }
.ag3 { @include span-columns(2 omega, 10); }
.ag4 { @include span-columns(3,6); }
.ag5 { @include span-columns(3 omega,6); }
.ag6 { @include span-columns(2,6); }
.ag7 { @include span-columns(4 omega,6); }
.ag8 { @include span-columns(2,4); }
.ag9 { @include span-columns(2 omega,4); }
.ag10 { clear: both; }

---

如您所愿，您不必指定特定列的总体高度，并且可以锁定特定列的尺寸。

实现这一点的最干净方法是使用CSS灵活框：

<div class="col1"> ... </div>    
<div class="col2"> ... </div>   
<div class="col3"> ... </div>

（）

标记很简单，CSS很容易理解，没有“黑客”。目前唯一的缺点是浏览器支持差（IE 10+）。我不认为这是个大问题，因为你可以在IE 9中使用JavaScript来解决这个问题。 查看其他用例

---

我多年来一直使用的另一个很好的解决方案是。CSS是干净的，但有点难理解，HTML有点笨重，因为它需要为每一列提供包装器元素。如果您需要IE6+支持，而不必求助于javascript，这可能是第二个最佳选择

---

还有其他方法可以做到这一点：

• 表格布局（

  显示：表格和相关属性）

• 身体上的背景图像（对于纯色CSS渐变也适用）

它们在中进行了解释（忽略flex-box-one，因为它使用了一些不必要的9999px边缘攻击的旧实现）

---

但这些方法引入了其他限制，可能会超过前两种方法的限制。例如，Firefox没有相对于表格单元格定位绝对元素。在背景中，这种定位根本不可能，因为柱没有真正的100%高度

这可以通过CSS网格和Flexbox的组合来实现：

html，
身体{
身高：100%；
}
.电网{
显示：网格；
网格模板柱：1fr 1fr 1fr；
边框：实心2倍灰色；
填充：12px；
身高：100%；
栅隙：10px；
最小高度：450px；
}
.栏目{
显示器：flex；
柔性流动：柱；
}
.项目{
边框：实心2件橙色；
身高：100%；
保证金：5px0；
}
.项目.固定1{
高度：100px；
}
.项目.固定2{
高度：380px；
}

Bootstrap columns应该能够做到这一点。如果您感兴趣，我有一个简单的JS解决方案。好吧，CSS显然是用于布局和设计的，现在是2013年，我打赌有一个CSS3答案。我们可以强制使用JS解决方案，但我不喜欢使用JS，因为有更好更干净的方法。我想知道我是否嵌套了两个假表（我的意思是

display:table

divs）以实现兼容性，渲染速度是否会像使用真实表一样慢？我怀疑元素之间的渲染性能差异是否明显。表的主要问题是它们不支持块元素所具有的所有特性（例如，

margin

）

body{   
  display: -ms-flexbox;     /* ie 10 (older but working flex implementation) */     
  display: -webkit-flexbox;
  display: flex;    
  min-height: 100vh; /* optional, forces minimum height to 100% of viewport */
  margin: 0;
  padding:0;        
}

.col1, .col3{
  width: 25%;
}

.col2 {
  width: 50%;    
}