CSS 子元素铺满整个父元素、CSS + JQuery 实现遮罩层

小灰灰 2022-05-26 06:06 258阅读 0赞

**目录**

CSS 子元素铺满整个父元素

CSS + JQuery 实现遮罩层

--------------------

# CSS 子元素铺满整个父元素 #

1、有时候需要咋们的内容容器铺满整个页面，如在pad上访问时，希望它完全铺满，而且外围还不出现滚动条，以至于让它看起来像桌面App一样

2、如下所示".fileTreeContainer"虽然为div设置了"wdth:100%;height:100%"，但是却只有宽度有效，其高度并没有达到我们想要的目的

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>CSS 子元素铺满整个父元素</title>
        <style type="text/css">
            /*解决方法：
            1、从根节点html开始设置height: 100%;
            2、必须是从html开始，然后body，接着就是咋们自己的元素
            3、这样一步步自适应下去就OK了
            */
            * {
                margin: 0px;
                padding: 0px;
            }
            html, body {
                width: 100%;
                height: 100%;
                border: 1px sandybrown solid;
                overflow: hidden;
            }
            /*文件树容器*/
            .fileTreeContainer {
                width: 100%;
                height: 100%;
                border: 1px red solid;
            }
        </style>
    </head>
    <body>
    <div class="fileTreeContainer">
    </div>
    </body>
    </html>

# CSS + JQuery 实现遮罩层 #

1、只需要在需要显示遮罩层的时候，调用 showMask方法，不再不需要遮罩层时，调用 hideMask进行移除即可。

![20191217192332538.gif][]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Filter 滤镜</title>
        <style>
            /*遮罩层样式，基于 body 元素进程绝对定位，阴影铺满整个 body*/
            .showMaskDiv {
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 1;
                top: 0px;
                left: 0px;
                background-color: rgba(10, 10, 10, 0.5);
            }
    
            /*遮罩之上的元素样式，同样基于 body 元素进程绝对定位,且必须在遮罩层之上.*/
            .add_panel {
                margin-left: 200px;
                display: none;
                position: absolute;
                z-index: 3;
                border: 1px red solid;
                color: white;
            }
        </style>
        
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript">
            //显示遮罩层,动态为body追加元素进行遮罩
            function showMask() {
                var showMaskJQ = $("<div class='showMaskDiv'></div>");
                showMaskJQ.appendTo("body");
            }
    
            //动态移除遮罩层
            function removeMask() {
                $(".showMaskDiv").remove();
            }
    
            $(function () {
                $("#add").click(function () {
                    showMask();
                    $(".add_panel").show();
                });
                $("#cancel").click(function () {
                    removeMask();
                    $(".add_panel").hide();
                });
            });
        </script>
    </head>
    <body>
    <div>
        我是底层
    </div>
    <button type="button" id="add">录入</button>
    <div class="add_panel">
        <h3>录入面板</h3>
        <button type="button" id="cancel">取消</button>
    </div>
    </body>
    </html>

[20191217192332538.gif]: /images/20220526/fad085bbccf14f87bde7fe19c6e8a799.png