Home > Article > Web Front-end > css implements shrinkable top, bottom, left and right layout
css implements shrinkable top, bottom, left and right layout

王林forward: 2020-09-17 17:17:563149browse
First let’s take a look at the implementation effect:
(Recommended tutorial: CSS tutorial)
css implements shrinkable top, bottom, left and right layout
Code implementation:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <title>布局</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        html, body {
            width: 100%;
            height: 100%;
        }
 
        .left {
            width: 220px;
            height: 100%;
        }
 
        .center {
            position: absolute;
            top: 0;
            left: 220px;
            right: 200px;
            bottom: 0;
            background-color: grey;
        }
 
        .right {
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 100%;
        }
 
        .top {
            width: 100%;
            height: 70px;
            line-height: 70px;
        }
 
        .middle {
            position: absolute;
            top: 70px;
            bottom: 40px;
            width: 100%;
            text-align: center;
        }
 
        .bottom {
            position: absolute;
            bottom: 0;
            width: 100%;
            line-height: 40px; /*行高与高度相等，内容垂直居中*/
            text-align: center;
        }
 
        .top .bl_move {
            height: 2px;
            width: 100%;
            bottom: 0;
            cursor: col-resize;
            position: relative;
            background-color: lightgray;
            z-index: 2;
            line-height: 0;
            font-size: 12px;
        }
 
        .top .bl_fold {
            width: 36px;
            height: 12px;
            position: absolute;
            cursor: pointer;
            z-index: 3;
            opacity: .8;
            filter: alpha(opacity=80);
            text-decoration: none;
            background: #e5e5e5;
            color: #666;
            text-align: center;
            margin-top: -0px;
            left: 50%;
            right: -12px;
            line-height: 36px;
            border-radius: 0 3.01px 3.01px 0;
        }
 
        .top .bl_fold i {
            position: relative;
            top: -15px;
        }
 
        .left .bl_move {
            width: 2px;
            height: 100%;
            cursor: col-resize;
            position: relative;
            background-color: lightgray;
            z-index: 2;
            font-size: 12px;
            float: left;
        }
 
        .left .bl_fold {
            width: 12px;
            height: 36px;
            position: absolute;
            cursor: pointer;
            float: left;
            z-index: 3;
            opacity: .8;
            filter: alpha(opacity=80);
            text-decoration: none;
            background: #e5e5e5;
            color: #666;
            text-align: center;
            vertical-align: middle;
            top: 50%;
            line-height: 36px;
            border-radius: 0 3.01px 3.01px 0;
        }
 
        .left .bl_fold i {
            position: relative;
        }
 
        .right .bl_move {
            width: 2px;
            height: 100%;
            cursor: col-resize;
            position: relative;
            background-color: lightgray;
            z-index: 2;
            font-size: 12px;
            float: right;
        }
 
        .right .bl_fold {
            width: 12px;
            height: 36px;
            position: absolute;
            cursor: pointer;
            float: left;
            z-index: 3;
            opacity: .8;
            filter: alpha(opacity=80);
            text-decoration: none;
            background: #e5e5e5;
            color: #666;
            text-align: center;
            vertical-align: middle;
            top: 50%;
            left: -12px;
            line-height: 36px;
            border-radius: 0 3.01px 3.01px 0;
        }
 
        .right .bl_fold i {
            position: relative;
        }
 
        .bottom .bl_move {
            height: 2px;
            width: 100%;
            bottom: 0;
            cursor: col-resize;
            position: relative;
            background-color: lightgray;
            z-index: 2;
            line-height: 0;
            font-size: 12px;
        }
 
        .bottom .bl_fold {
            width: 36px;
            height: 12px;
            position: absolute;
            cursor: pointer;
            z-index: 3;
            opacity: .8;
            filter: alpha(opacity=80);
            text-decoration: none;
            background: #e5e5e5;
            color: #666;
            text-align: center;
            margin-top: -0px;
            left: 50%;
            top: -12px;
            line-height: 36px;
            border-radius: 0 3.01px 3.01px 0;
        }
 
        .bottom .bl_fold i {
            position: relative;
            top: -15px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="top">
    <div class="panel-content">
        内容内容内容内容内容内容内容内容
        <i class="fa fa-sort-desc" aria-hidden="true"></i>
        <i class="fa fa-sort-desc" aria-hidden="true"></i>
    </div>
    <div class="bl_move">
        <a href="javascript:;" title="点击展开" class="bl_fold">
            <i class="fa fa-caret-top" aria-hidden="true"></i>
        </a>
    </div>
</div>
<div class="middle">
    <div class="left">
        <div class="panel-content" style="float: left;width: calc(100% - 2px)">
            内容内容内容内容内容内容内容内容
            <i class="fa fa-sort-desc" aria-hidden="true"></i>
            <i class="fa fa-sort-desc" aria-hidden="true"></i>
        </div>
        <div class="bl_move">
            <a href="javascript:;" title="点击展开" class="bl_fold">
                <i class="fa fa-caret-up" aria-hidden="true"></i>
            </a>
        </div>
    </div>
    <div class="center">
    </div>
    <div class="right">
        <div class="panel-content" style="float: right;width: calc(100% - 2px)">
            内容内容内容内容内容内容内容内容
            <i class="fa fa-sort-desc" aria-hidden="true"></i>
            <i class="fa fa-sort-desc" aria-hidden="true"></i>
        </div>
        <div class="bl_move">
            <a href="javascript:;" title="点击展开" class="bl_fold">
                <i class="fa fa-caret-right" aria-hidden="true"></i>
            </a>
        </div>
    </div>
</div>
<div class="bottom">
    <div class="bl_move">
        <a href="javascript:;" title="点击展开" class="bl_fold">
            <i class="fa fa-caret-down" aria-hidden="true"></i>
        </a>
    </div>
    <div class="panel-content" style="height: calc(100% - 2px)">
        Copyright © 2018 XXX公司版权所有
    </div>
</div>
<script>
    $(function () {
        $(".top .bl_fold").on(&#39;click&#39;, function () {
            var visible = $(&#39;.top .panel-content&#39;).is(":visible");
            if (visible) {
                $(&#39;.top .panel-content&#39;).hide();
                $(".middle").css("top", &#39;0px&#39;);
            } else {
                $(&#39;.top .panel-content&#39;).show();
                $(".middle").css("top", &#39;70px&#39;);
            }
        });
 
        $(".left .bl_fold").on(&#39;click&#39;, function () {
            var visible = $(&#39;.left .panel-content&#39;).is(":visible");
            if (visible) {
                $(&#39;.left .panel-content&#39;).hide();
                $(".center").css("left", &#39;2px&#39;);
            } else {
                $(&#39;.left .panel-content&#39;).show();
                $(".center").css("left", &#39;220px&#39;);
            }
        });
 
        $(".right .bl_fold").on(&#39;click&#39;, function () {
            var visible = $(&#39;.right .panel-content&#39;).is(":visible");
            if (visible) {
                $(&#39;.right .panel-content&#39;).hide();
                $(".center").css("right", &#39;2px&#39;);
            } else {
                $(&#39;.right .panel-content&#39;).show();
                $(".center").css("right", &#39;200px&#39;);
            }
        });
 
        $(".bottom .bl_fold").on(&#39;click&#39;, function () {
            var visible = $(&#39;.bottom .panel-content&#39;).is(":visible");
            if (visible) {
                $(&#39;.bottom .panel-content&#39;).hide();
                $(".middle").css("bottom", &#39;2px&#39;);
            } else {
                $(&#39;.bottom .panel-content&#39;).show();
                $(".middle").css("bottom", &#39;40px&#39;);
            }
        });
    })
</script>
</body>
</html>
The above is the detailed content of css implements shrinkable top, bottom, left and right layout. For more information, please follow other related articles on the PHP Chinese website!
Statement：
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete
Previous article：Do you know how to use css anchors?Next article：Do you know how to use css anchors?
See more
css implements shrinkable top, bottom, left and right layout

Related articles
