底部可展开的滚动的页面效果

前情提要

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>

View Code

问题点总结

1，当没有给 footer 加高度的时候，点击展开 footer 的内容，footer高度会自适应，并不会使得页面出现滚动条

2，footer 还需要给 overflow: visible 样式（当然这个是默认的样式），不然也不能出现页面整体滚动效果

@萍2樱释ღ( ´･ᴗ･` )

打不死的小强