底部可展开的滚动的页面效果
前情提要
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,底部下方,点击可以展开或者关闭以展示更多折叠内容。
关键点,也就是说,底部内容始终处在页面下方,且底部折叠内容展开之后,整个页面可以滚动,而不仅仅是在底部区域滚动
代码实现
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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:
打不死的小强