前端试题-两列等高布局

Posted 2020-06-09

我们经常会见到一些小微网站上，左边是导航，右边是内容，无论是左边导航高度高还是右边内容高度高，两边始终以最高的来自适应等高显示。

这里的布局主要是把两边元素同时设两个比较大的padding-bottom，然后设置相等值的负的margin-bottom，最后给父元素加一个overflow:hidden.

比如上图有两列，一列高一列低，这里我们假设给左右都加上黄色部分高度padding-bottom:500px，如果不做其他处理的话，左边仍然没有右边高，分别加上不同背景色，左边和右边还是有差值，左边仍然会存在背景色填不到最下面难看画面。

如果两边设置margin-bottom：-500px,同时父元素设置overflow:hidden，这里margin会抵消paading带来的影响，页面会以子元素最高撑开，这里页面会在B线截止，而左边的背景色会填充到最下面B线为止，这样就达到两边自适应等高的目的。

我们如果设置margin-bottom：-300px，页面底部会在C线位置。

我们如果设置margin-bottom:-700px，页面底部会在A线位置。

这也是为什么我们选择相等的负margin值的原因。