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

目录CSS 子元素铺满整个父元素CSS + JQuery 实现遮罩层CSS 子元素铺满整个父元素1、有时候需要咋们的内容容器铺满整个页面，如在pad上访问时，希望它完全铺满，而且外围还不出现滚动条，以至于让它看起来像桌面App一样2、如下所示".fileTreeContainer"虽然为div设置了"wdth:100%;height:100%"，但是却只有宽度有效，其高度并没有...

蚩尤后裔

10687人浏览 · 2019-12-17 19:29:23

蚩尤后裔 · 2019-12-17 19:29:23 发布

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进行移除即可。

<!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>
    <!-- JQuery CDN-->
    <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>