html - Solution to the flexible heights

Question

I got 4 columns and I decided to set a height value to them as I like them to appear ending at the same line but I'm working on a flexible layout, I mean, when the browser is resized down and the page gets narrower, the heights of the boxes should extend. So how do I set the heights of boxes evenly without setting a height value?

Answer 1

如果我理解正确，您希望所有列的高度相同。

您可以通过将 div 显示为表格单元格来解决此问题，如下所示：

HTML：

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

CSS：

body > div {
    display: table;
    width: 100%;
}
div > div {
    display: table-cell;
    width: 25%;
}

还要检查这个演示。单击第一列以添加一些额外的文本（只是为了让您了解它是如何工作的。

Answer 2

你可以，但你需要javascript来做到这一点。

Flexbox 可以满足您的需求，但它介于两个规范之间，目前支持非常差，因为浏览器在它们支持的规范中相差甚远，因此遗憾的是，现阶段它并不是一个真正的选择。

您可以使用 javascript 创建自己的。或者使用flexbox polyfill

Answer 3

有很多方法可以实现这一目标。试试下面的链接。

http://css-tricks.com/fluid-width-equal-height-columns/

演示