前情提要
CSS Overflow
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值：
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
注意:overflow 属性只工作于指定高度的块元素上。
display:flex布局
阮老师flex布局博客地址 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
布局需求效果
要求：
1，页面分为头部，内容，底部三部分，头部高度固定，中间内容自适应（可溢出滚动），底部内容可滚动
2，底部下方，点击可以展开或者关闭以展示更多折叠内容。
关键点，也就是说，底部内容始终处在页面下方，且底部折叠内容展开之后，整个页面可以滚动，而不仅仅是在底部区域滚动
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script> <style> * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; overflow: hidden; } .container { height: 100%; width: 100%; display: flex; flex-direction: column; overflow-y: auto; } .header { height: 49px; background-color: red; } .body { flex: 1; background-color: green; } .footer { height: 46px; background-color: yellow; overflow: visible; } .hidden { display: none; } </style> </head> <body> <div class="container"> <div class="header">头部</div> <div class="body">内容</div> <div class="footer"> <div class="open-scroll"> <div class="title">我是尾部标题</div> <div class="content">我是尾部标题内容，我的内容有很多，可以一直往下滚动哦</div> </div> </div> </div> <script> $(function () { $('.footer').click(function () { $(this).find('.content').toggleClass('hidden') }) }) </script> </body> </html>
问题点总结
1，当没有给 footer 加高度的时候，点击展开 footer 的内容，footer高度会自适应，并不会使得页面出现滚动条
2，footer 还需要给 overflow: