HTML+Bootstrap中box-shadow仅显示于浏览器可视区域问题求助

云原生阿岚

2026-8-16

问题：box-shadow仅显示在浏览器可视高度范围

现象说明

浏览器高度大于页面高度时，页面四周的box-shadow显示正常
浏览器高度小于页面高度时，box-shadow仅出现在可视区域，无法覆盖整个页面

代码文件

style.css:

/*
 * Globals
 */


/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}


/*
 * Base structure
 */

body {
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}

.cover-container {
  max-width: 42em;
}


/*
 * Header
 */

.nav-masthead .nav-link {
  color: rgba(255, 255, 255, .5);
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

html {
min-height: 100%;
  /*height: 100%;*/
  display: flex;
  flex-direction: column;
}

index.html:

<!doctype html>
<html lang="en" class="h-100">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>8AI-Module</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link href="style.css" rel="stylesheet">
    <script
            src="https://code.jquery.com/jquery-3.6.1.min.js"
            integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
            crossorigin="anonymous"></script>
</head>

<body class="d-flex h-100 text-bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
    <header class="mb-auto">
        <div>
            <h3 class="float-md-start mb-0"><a class="navbar-brand" href="#">8AI-Module</a></h3>
            <!--<h3 class="float-md-start mb-0">8AI-Module</h3>-->

            <nav class="nav nav-masthead justify-content-center float-md-end">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                       aria-expanded="false">
                        Status
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" id="status-overview-a" href="#">Overview</a></li>
                        <li><a class="dropdown-item" id="status-modules-a" href="#">Modules</a></li>
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                       aria-expanded="false">
                        Settings
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" id="settings-mqtt-a" href="#">MQTT</a></li>
                        <li><a class="dropdown-item" id="settings-modules-a" href="#">Modules</a></li>
                    </ul>
                </li>
            </nav>
        </div>
    </header>

    <main class="px-3">
        <div id="status-overview">
            <h1>Status</h1>
            <h3>System</h3>
            <div id="status-system-tb"><table class="table table-dark"><tbody><tr><td>ESP-IDF Version</td><td>4.4.2</td></tr><tr></tr><tr><td>Firmware Version</td><td>0.0.1</td></tr><tr></tr><tr><td>Build Date</td><td>12 July 2021 - 20:55</td></tr><tr></tr><tr><td>Uptime</td><td>47 days</td></tr><tr></tr></tbody></table></div>
            <h3>MQTT</h3>
            <div id="status-mqtt-tb"><table class="table table-dark"><tbody><tr><td>Status</td><td>Disconnected</td></tr><tr></tr><tr><td>Server</td><td>192.168.3.2</td></tr><tr></tr><tr><td>Port</td><td>6565</td></tr><tr></tr><tr><td>Last change</td><td>17 hours</td></tr><tr></tr></tbody></table></div>
            <h3>Modules</h3>
            <div id="status-modules-tb"><table class="table table-dark"><tbody><tr><td>Module 1</td><td>Enabled</td></tr><tr></tr><tr><td>Module 2</td><td>Disabled</td></tr><tr></tr><tr><td>Module 2</td><td>Disabled</td></tr><tr></tr><tr><td>Module 2</td><td>Disabled</td></tr><tr></tr></tbody></table></div>
        </div>
        <div id="status-modules" class="d-none">
            status modules
        </div>

        <div id="settings-mqtt" class="d-none">
            settings mqtt
        </div>

        <div id="settings-modules" class="d-none">
            <h1>Cover your page.</h1>
            <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit
                the
                text, and add your own fullscreen background photo to make it your own.</p>
            <p class="lead">
                <a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Learn more</a>
            </p>
        </div>
    </main>

    <footer class="mt-auto text-white-50 text-center">
        <p>Cover template for <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, by <a
                href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
    </footer>
</div>


</body>
</html>

原因分析

问题根源在于html和body的布局设置冲突：

html标签设置了display: flex，改变了文档流的默认行为，导致body的高度被限制在视口范围内
body被Bootstrap的h-100类强制设置为height: 100%，当页面内容超出视口高度时，body不会随内容自动增高，因此box-shadow只能覆盖到body的实际高度（即视口高度）

解决方法

1. 修改style.css

移除html的flex布局设置，同时给body设置min-height: 100vh保证至少占满视口：

html {
  min-height: 100%;
  /* 移除以下两行 */
  /* display: flex; */
  /* flex-direction: column; */
}

body {
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
  min-height: 100vh; /* 新增，确保body至少占满视口高度 */
}

2. 修改index.html

移除body标签的h-100类：

<body class="d-flex text-bg-dark">

调整后，body会随内容高度自动扩展，box-shadow就能覆盖整个页面内容区域，无论浏览器高度是否小于页面高度。

内容的提问来源于stack exchange，提问作者Akita85

HTML+Bootstrap中box-shadow仅显示于浏览器可视区域问题求助

现象说明 #

代码文件 #

原因分析 #