布局中元素由于浏览器窗口变化被挤下来（解决）

在项目开发中，遇到一个问题，布局分上中下三个级，上面放form表单中的操作按钮等，中间放table表格显示数据，下面是表格的分页器；其中表格的高度设置方式为    calc(100% - 90px);意为总的高度100%减去上面form和下面page的高度和（90px）;这样做的缺陷是当窗口缩小后，高度超出了原定的高度，元素高度不够就被挤下去了，解决方式就是使用属性：display:flex;

该布局的缺点： 

1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局。

2.当.left,.right或者top、bottom 的宽度是固定的，浏览器宽度变的过窄时，bottom、right会被挤到下面

用display:flex布局，可以解决这两个缺点

布局中元素由于浏览器窗口变化被挤下来（解决）

原文：https://www.cnblogs.com/LindaBlog/p/10978322.html