在长期使用 float 这种变态布局的过程中,
不等高/不方便垂直居中这些问题实在不好意思和人吐槽,
而如果设成定高那又是另一个坑了,特别是在这个响应式布局的年代。
记得当年最初遇到这个问题时我还着实动了下脑筋,
起初是 min-height,或者不允许超出,后来嘛,宝宝心里苦呀...
无意间发现一个奇葩的办法,甚至我都忘记了这想法是怎么冒出来的。
.wrap > * {margin-bottom:-1000px;padding-bottom:1000px;}
后来才知道 display: table-cell 是可以不与 table 一起用的,然后瞬间发现新大陆。
.wrap > * {display: table-cell;}
非常好,虽然宽度设置用 table 布局向来麻烦,另外你猜他能多行布局吗,呵呵呵呵。
然而后来接触到响应式,开始喜欢狂拉屏幕边框(改变屏幕宽度),上面两种布局就此沦陷...
而 With the development of technology,CSS3 中的 box 布局以及 flex 布局相当完美的出来解决这个问题了
.wrap {display: box;}
.wrap {display: flex;}
这两者分别有 box-align: stretch 和 align-items: stretch 便是让子元素等高的属性,而且默认就是,是不是省了很多事呀。
(在此强行推荐一波 flex 布局,非常非常非常好用)
等高布局咱们用的并不算多,但遇到问题总是让人不爽的,作为一个合格的布局师,能 CSS 解决的绝不用 JS。