如何使一个div能够铺满整个页面？ && 模态框的制作 && outerHTML-优快云博客

本文介绍如何使用CSS设置一个Div占据整个浏览器窗口，并通过JavaScript控制其显示与隐藏，适用于创建模态框等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：　使用　ele.outerHTML = '' 这样的方法可以很容易的清除一个元素。当然也可以使用parent.removeChild() ，但是相较而言，还是使用 outerHTML = '' 更容易、便捷一些。

如何使一个div能够铺满整个页面？

第一步：提出问题

　　最近在做项目，希望实现这样一个效果：在首页的右下角fix一个搜索图片，点击这个搜索图片，就会弹出一个类似模态框的div，这个div会占领整个页面的位置。

第二步：使用demo测试

　　下面我们就利用一个简单的demo测试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fullPage</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body, .fullpage {
            width: 100%;
            height: 100%;
        }
        .fullpage {
            background-color: #abc;
            color: white;
            font-size: 35px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="fullpage">
        这是一段文字
    </div>
</body>
</html>

　　效果如下所示：

　　这是最简单的一种方式。

　　如果我们希望当点击某一个按钮时，这个模态框出现，将其他内容全部覆盖呢？并且其下面的内容不可滚动....应该怎么做呢？

　　首先看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fullPage</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body, .fullpage {
            width: 100%;
            height: 100%;
        }
        .fullpage {
            display: none;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #abc;
            color: white;
            font-size: 35px;
            text-align: center;
        }
        button {
            position: fixed;
            bottom: 50px;
            right: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="content">
        快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>
    </div>
    <button>click to fullpage</button>
    <div class="fullpage">
        文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>
    </div>
    <script>
        document.querySelector("button").onclick = function() {
            document.querySelector(".fullpage").style.display = "block";
        }
    </script>
</body>
</html>

　　这里我利用将这个div的position: fixed； top: 0; bottom: 0; left: 0; right: 0;可以将这个div占满整个屏幕。

第三步：运用到项目中

　　更好的做法是下面这样的:

      var model = document.createElement("div");
      model.style.cssText = "position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.7);z-index: 9998;";
      document.body.appendChild(model);

　　即点击某个按钮之后直接创建一个div，然后利用cssText来填充。

　　注意： 因为这里直接添加到了 body 上，所以使用absolute和使用fixed得到的结果是类似的。

　　如下：

 state.ifShowCart = !state.ifShowCart;
      if (state.ifShowCart == true) {
        var model = document.createElement("div");
        model.id = "Model";
        model.style.cssText = "position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.7);z-index: 9998;";
        document.body.appendChild(model);
      } else {
        document.getElementById("Model").outerHTML = "";
      }