单页应用Navbar置顶与Google Map全屏适配布局问题求助

我帮你排查了下代码，问题的核心是你给#content设置了display:flex但没指定垂直排列，默认的flex-direction: row会让Navbar和Map横向并排，所以Navbar被挤到了左侧。另外还有一些布局细节需要调整，下面是修复后的完整代码和关键修改说明：

关键修改点 #

• 给#content添加flex-direction: column，让内部元素垂直排列
• 移除Navbar的flex:1，并确保它占满整个宽度
• 给#map设置flex:1，让它自动填充剩余空间
• 重置html和body的默认边距，避免不必要的间距
• 调整#content的定位，去掉position:absolute，改用flex布局实现全屏

修复后的CSS代码 #

/* DEMO STYLE */
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
html {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 height: 100%;
}
body {
 font-family: 'Poppins', sans-serif;
 background: #fafafa;
 margin: 0;
 padding: 0;
 height: 100%;
}
p {
 font-family: 'Poppins', sans-serif;
 font-size: 1.1em;
 font-weight: 300;
 line-height: 1.7em;
 color: #999;
}
a, a:hover, a:focus {
 color: inherit;
 text-decoration: none;
 transition: all 0.3s;
}
.navbar {
 padding: 15px 10px;
 background: #fff;
 border: none;
 border-radius: 0;
 margin-bottom: 0; /* 移除默认的margin-bottom，避免Map上方有空隙 */
 box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
 display: flex;
 align-items: center;
 width: 100%; /* 确保Navbar占满宽度 */
 /* 移除flex:1，避免它抢占Map的空间 */
}
.navbar-btn {
 box-shadow: none;
 outline: none !important;
 border: none;
}
.navbar-header {
 height: 30%;
}
.line {
 width: 100%;
 height: 1px;
 border-bottom: 1px dashed #ddd;
 margin: 40px 0;
}
/* --------------------------------------------------- SIDEBAR STYLE ----------------------------------------------------- */
#sidebar {
 width: 250px;
 position: fixed;
 top: 0;
 left: -250px;
 height: 100vh;
 z-index: 999;
 background: #7386D5;
 color: #fff;
 transition: all 0.3s;
 overflow-y: scroll;
 box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
#sidebar.active {
 left: 0;
}
#dismiss {
 width: 35px;
 height: 35px;
 line-height: 35px;
 text-align: center;
 background: #7386D5;
 position: absolute;
 top: 10px;
 right: 10px;
 cursor: pointer;
 transition: all 0.3s;
}
#dismiss:hover {
 background: #fff;
 color: #7386D5;
}
.overlay {
 position: fixed;
 width: 100vw;
 height: 100vh;
 background: rgba(0, 0, 0, 0.7);
 z-index: 998;
 display: none;
}
#sidebar .sidebar-header {
 padding: 20px;
 background: #6d7fcc;
}
#sidebar ul.components {
 padding: 20px 0;
 border-bottom: 1px solid #47748b;
}
#sidebar ul p {
 color: #fff;
 padding: 10px;
}
#sidebar ul li a {
 padding: 10px;
 font-size: 1.1em;
 display: block;
}
#sidebar ul li a:hover {
 color: #7386D5;
 background: #fff;
}
#sidebar ul li.active>a, a[aria-expanded="true"] {
 color: #fff;
 background: #6d7fcc;
}
a[data-toggle="collapse"] {
 position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
 content: '\e259';
 display: block;
 position: absolute;
 right: 20px;
 font-family: 'Glyphicons Halflings';
 font-size: 0.6em;
}
a[aria-expanded="true"]::before {
 content: '\e260';
}
ul ul a {
 font-size: 0.9em !important;
 padding-left: 30px !important;
 background: #6d7fcc;
}
ul.CTAs {
 padding: 20px;
}
ul.CTAs a {
 text-align: center;
 font-size: 0.9em !important;
 display: block;
 border-radius: 5px;
 margin-bottom: 5px;
}
a.download {
 background: #fff;
 color: #7386D5;
}
a.article, a.article:hover {
 background: #6d7fcc !important;
 color: #fff !important;
}
/* --------------------------------------------------- CONTENT STYLE ----------------------------------------------------- */
#content {
 width: 100%;
 padding: 0;
 min-height: 100vh;
 transition: all 0.3s;
 /* 移除position:absolute，改用flex布局 */
 display: flex;
 flex-direction: column; /* 关键：垂直排列内部元素 */
}
#map {
 width: 100%;
 flex: 1; /* 关键：填充剩余空间 */
 /* 确保Map能正确显示高度 */
 min-height: 0;
}

修复后的HTML代码（结构无需修改，保持原样即可） #

<div class="wrapper">
 <!-- Sidebar Holder -->
 <nav id="sidebar">
 <div id="dismiss">
 <i class="glyphicon glyphicon-arrow-left"></i>
 </div>
 <div class="sidebar-header">
 <h3>Bootstrap Sidebar</h3>
 </div>
 <ul class="list-unstyled components">
 <p>Dummy Heading</p>
 <li class="active">
 <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Home</a>
 <ul class="collapse list-unstyled" id="homeSubmenu">
 <li>
 <a href="#">Home 1</a>
 </li>
 <li>
 <a href="#">Home 2</a>
 </li>
 <li>
 <a href="#">Home 3</a>
 </li>
 </ul>
 </li>
 <li>
 <a href="#">About</a>
 <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
 <ul class="collapse list-unstyled" id="pageSubmenu">
 <li>
 <a href="#">Page 1</a>
 </li>
 <li>
 <a href="#">Page 2</a>
 </li>
 <li>
 <a href="#">Page 3</a>
 </li>
 </ul>
 </li>
 <li>
 <a href="#">Portfolio</a>
 </li>
 <li>
 <a href="#">Contact</a>
 </li>
 </ul>
 <ul class="list-unstyled CTAs">
 <li>
 <a href="#" class="download">Download source</a>
 </li>
 <li>
 <a href="#" class="article">Back to article</a>
 </li>
 </ul>
 </nav>
 <!-- Page Content Holder -->
 <div id="content">
 <nav class="navbar navbar-default">
 <div class="container-fluid">
 <div class="navbar-header">
 <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
 <i class="glyphicon glyphicon-align-left"></i>
 <span>Open Sidebar</span>
 </button>
 </div>
 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 <ul class="nav navbar-nav navbar-right">
 <li>
 <a href="#">Page</a>
 </li>
 <li>
 <a href="#">Page</a>
 </li>
 <li>
 <a href="#">Page</a>
 </li>
 <li>
 <a href="#">Page</a>
 </li>
 </ul>
 </div>
 </div>
 </nav>
 <div id="map"></div>
 </div>
 </div>
 <div class="overlay"></div>

效果说明 #

修改后，Navbar会固定在页面顶部，Google Map会自动铺满Navbar下方的所有剩余空间，同时侧边栏的展开/收起功能也能正常工作。如果Map加载后高度还是有问题，可以给#map添加height: 100%作为补充，但flex:1已经足够让它填充剩余空间了。

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