使用JavaScript计算CSS网格中的行高

Question

我为新项目制作了一个小的CSS网格框架，但是不久之后，我意识到它存在一些缺点。 问题是，列不能占据一行的整个高度，这反过来又阻止了我创建“块状”布局，而在当前设置下，我无法使用CSS来实现这一目的。

我已经用一些JavaScript解决了这个问题，但令我困扰的是，这种和平的代码需要在页面加载后执行。 这意味着如果要加载的内容很多，布局将有些混乱。

另外，我对JavaScript不太满意，因此不确定是否正确执行了此操作。

这是CodePen上的源代码链接

[注意]我不想使用任何JavaScript库

Answer 1

您可以尝试使用css table显示属性堆栈，并在需要时使用javascript作为不支持的浏览器的后备。

  display: table;
  display: table-cell;
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row;
  display: table-caption;

http://codepen.io/anon/pen/LEniv

浏览器兼容性

Answer 2

http://jsfiddle.net/cDZpA/

.container { 
    position: relative;
    font-size: 0px;  
    overflow: hidden;
}
.col { 
    display: inline-block;
    width: 33.333%;
    font-size: 14px; 
    vertical-align: top;
    height: 100%;
    position: relative;
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

.c1 { background: yellow; }
.c2 { background: purple; }
.c3 { background: red;  }

不要问我如何，但是我放下的这段代码行之有效。

在这里，您的CodePen已修复： http ://codepen.io/anon/pen/wkbrj