Flex，一款网页布局神器，帮助您实现完美的布局并适应任何屏幕分辨率。
一般来说，主页由三部分组成。所以我们希望这三个部分填满整个屏幕。对于传统布局，仅此而已。20%、60%、70%等，但百分比不能很好地适应分辨率。例如，如果您的PC 屏幕高度为1200 像素，笔记本屏幕高度为900 像素，则使用百分比，两台设备上头部的20% 分别为240 像素和180 像素。显然是有区别的。我希望头部高度固定为100px，其余高度固定为120px。高度由屏幕本身计算并保留在中心区域。我怎样才能达到这个要求？其实我们这篇文章说的就是Flex
head、main、footer三个部分，父容器被包裹并且需要获取所有剩余高度的div需要设置为flex:1。
请仔细阅读说明
代码实现如下
!DOCTYPE htmlhtmlheadstyle type='text/css'html{height: 100%;}body { margin:0;padding:0; height: 100%;} /*这就是重点了，父容器设置了flex*/flex. -direction: column; /*这里是重要位置*/height: 100%;/*这里是重要位置，父容器的高度一定要明确*/}.head{border:1px dashed green; /*这是获取剩余所有高度的关键位置*/border:1px dashed blue;overflow: auto;}.footer{border:1px dashed red;}/style/headbodydiv class='wrap'div class=' head'a th:attr=' userid=${sender}' id='send' th:text='${sender}' /a/divdiv class='main'/divdiv class='footer'input type='text' id='reciver' style=' width: 60px ;margin-left: 2px;' placeholder='输入好友' /input type='text' id='message' value='hello !'/input type='button' onclick='send()' value=''/发送/div/div/body/html的效果为：
版权声明：本文转载于网络，版权归作者所有。如有侵权，请联系本站编辑删除。