页面全屏适配问题：地图无法拉伸填充区域求助

问题背景 #

搭建全屏页面并嵌入地图，使用min-height: 100vh解决了页面全屏问题，但地图无法适配拉伸，出现缩小情况，调整地图高度的方案均未生效。

页面结构原代码：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
   <header>
   </header>
   <div id="container">
       <aside class="left-sidebar">
       </aside>
       <aside class="right-sidebar" style="overflow: scroll;">
       </aside>
       <div id="map"></div>
   </div>
</body>
</html>

原CSS代码：

html, body {
    min-height: 100vh; /* this fixed my problem with the page
    width: 100%;
    height: max-content; 
}

#container{
    padding-top: 20px;
    top: 100px;
}

header {
    height: 80px;
    padding: 20px;
    width: 100%;
    border-style: solid;
}

#map {
    flex: 1;
    padding: 20px;
    margin-left: 200px; /* Adjust the margin to match the width of the left sidebar */
    margin-right: 400px; /* Adjust the margin to match the width of the right sidebar */
    height: 100%;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding-bottom: 5px;
    border-style: solid;
}

.right-sidebar {
    position: fixed;
    right: 0;
    padding: 20px;
    width: 400px; /* Adjust the width as needed */
    height:100%;
    border-style: solid;
}

.left-sidebar {
    position: fixed;
    padding: 20px;
    width: 200px; /* Adjust the width as needed */
    height:100%;
    border-style: solid;
}

问题截图：

解决方案 #

核心问题在于父容器没有提供正确的高度参考，以及布局方式未适配全屏需求，修改后的代码如下：

修改后的HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <header>
   </header>
   <div id="container">
       <aside class="left-sidebar">
       </aside>
       <aside class="right-sidebar" style="overflow: scroll;">
       </aside>
       <div id="map"></div>
   </div>
</body>
</html>

修改后的CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

header {
    height: 80px;
    padding: 20px;
    width: 100%;
    border-style: solid;
    position: relative;
    z-index: 10;
}

#container{
    height: calc(100vh - 80px);
    position: relative;
}

#map {
    height: 100%;
    width: calc(100% - 200px - 400px);
    margin-left: 200px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-style: solid;
}

.right-sidebar {
    position: fixed;
    right: 0;
    top: 80px;
    padding: 20px;
    width: 400px;
    height: calc(100vh - 80px);
    border-style: solid;
    box-sizing: border-box;
}

.left-sidebar {
    position: fixed;
    left: 0;
    top: 80px;
    padding: 20px;
    width: 200px;
    height: calc(100vh - 80px);
    border-style: solid;
    box-sizing: border-box;
}

修改说明 #

1. 修复HTML结构：补全原代码缺失的<head>闭合标签，避免结构错误。
2. 全局样式重置：用*选择器清除默认边距，设置box-sizing:border-box让padding包含在元素尺寸内。
3. 固定视口高度：将html, body的高度设为100vh，添加overflow:hidden防止页面整体滚动。
4. 容器高度适配：#container通过calc(100vh - 80px)占满header下方的剩余视口空间。
5. 地图尺寸精确计算：地图宽度用calc(100% - 200px - 400px)减去侧边栏宽度，高度设为100%继承容器高度，确保铺满可用空间。
6. 侧边栏位置调整：将侧边栏的top设为80px（与header高度一致），高度改为calc(100vh - 80px)，避免覆盖header且占满剩余空间。

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