Html 使所有浮动div高度相同 问题

我的页脚中有四列，除了最后一列之外，我在所有列上都设置了

border right

：

它们的高度都是可变的，因为内容也是可变的，所以我无法确定任何列的绝对高度值

如何确保所有列的高度相同，以便它们之间的边界长度相等

密码

body，
html{
字体系列：“开放式Sans”、Helvetica、Arial、Sans serif；
线高：1.62em；
字体重量：较轻；
填充顶部：15px；
}
a{
颜色：继承；
文字装饰：继承；
}
div#页脚{
背景：#333；
文本阴影：无；
颜色：白色；
盒影：0 10px rgba（0,0,0,0.5）插入；
颜色：#ccc；
填充：20px0；
文本阴影：0 1px 1px#111；
宽度：100%；
}
分区包装器{
宽度：100%；
最大宽度：1080px；
保证金：自动；
}
div#页脚div.wrapper div.column{
宽度：25%；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
填充：0 10px；
右边框：1px实心rgba（255,255,255,0.3）；
浮动：左；
}
div#页脚div.wrapper div.column h4{
字体大小：正常；
字体大小：16px；
文本对齐：左对齐；
颜色：白色；
/*边框底部：1px虚线#555*/
线高：2米；
边框底部：1px实心rgba（255、255、255、0.1）；
}
div#页脚div.wrapper div.column ul{
边缘底部：1.62em；
}
div#页脚div.wrapper div.column ul li，
div#页脚div.wrapper div.p列{
填充：0；
}
div#footer ul.footerList li:之前{
字体系列：“FontAwesome”；
内容：'\f0da'；
利润率：0.5px 0.0px；
}
div#页脚ul.footerList li{
左侧填充：15px；
}
div#页脚ul.footerList li span{
字体大小：继承；
}
div#页脚。对{
文本对齐：右对齐；
}
div#页脚p.meta{
字体大小：10px；
颜色：#777；
线高：1.62em；
文本对齐：右对齐；
}
div#页脚表格{
宽度：100%；
保证金：0；
填充：0；
边缘底部：1.62em；
}
div#页脚输入{
填充：8px 12px；
字体家族：继承；
边界：无；
保证金：0；
字体大小：14px；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
}
div#页脚标签{
显示：块；
}
div#页脚输入[type=“text”]，
div#页脚输入[type=“email”]{
宽度：80%；
}
div#页脚输入[type=“submit”]{
宽度：20%；
背景#FD5001；
颜色：白色；
光标：指针；
}
div#页脚表单输入[type=“email”]{
边界半径：2px 0 0 2px；
}
div#页脚表单输入：最后一个子项{
边界半径：0 2px 2px 0；
}
div#页脚输入[type=“submit”]：悬停{
背景#FD7902；
}
div#页脚输入[type=“submit”]：活动{
背景：#B03700；
}
div#页脚输入：焦点{
边框颜色：黑色；
}

社会的






重要环节










求职包
获取免费求职者信息包：
部分修订

由编辑部设计和开发的网站。版权及副本；2015年修订。版权所有

添加

显示：flex

to

div.wrapper

这将使直接子元素在默认情况下具有相同的高度

---

有关display flex的更多信息，请访问或访问此

Add

display:flex

to

div.wrapper

这将使直接子元素在默认情况下具有相同的高度

---

有关display flex的更多信息，请访问或尝试使用此方法

div.wrapper{
    position:relative;
    }
    .column + .column:after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      border-left: solid 1px #ccc;
    }

---

试着这样做

div.wrapper{
    position:relative;
    }
    .column + .column:after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      border-left: solid 1px #ccc;
    }

---

将包装设置为

display:table

，并将列设置为

display:table单元格（并移除浮动）

所以它看起来是这样的：

.wrapper {
    display: table;
    ...
}
.wrapper .column {
    display: table-cell;
    ...
}

将包装设置为
display:table
，并将列设置为
display:table单元格（并移除浮动）

所以它看起来是这样的：

.wrapper {
    display: table;
    ...
}
.wrapper .column {
    display: table-cell;
    ...
}

您可以使用jquery对此进行归档


$（文档）.ready（函数（）{
$（'.wrapper'）。每个（函数（）{
var-highestBox=0；
$（'.column'，this）.each（函数（）{
if（$（this）.height（）>highestBox）
highestBox=$（this）.height（）；
});  
$（'.column'，this）.height（最高框）；
});
});
body，html{
字体系列：“开放式Sans”、Helvetica、Arial、Sans serif；
线高：1.62em；
字体重量：较轻；
填充顶部：15px；
}
a{
颜色：继承；
文字装饰：继承；
}
p{字体重量：较轻；}
div#页脚{
背景：#333；
文本阴影：无；
颜色：白色；
盒影：0.10px rgba（0,0,0,0.5）插入；
颜色：#ccc；
填充：20px0；
字体大小：12px；
文本阴影：0 1px 1px#111；
宽度：100%；
}
分区包装器{
宽度：100%；
最大宽度：1080px；
保证金：自动；
}
div#页脚div.wrapper div.column{
/*宽度：计算值（100%/3）*/
宽度：25%；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
填充：0 10px；
右边框：1px实心rgba（255255,0.3）；
浮动：左；
}
div#