Javascript 无法删除HTML正文外的空白和灰色框_Javascript_Html_Css_Mobile_Leaflet

Javascript 无法删除HTML正文外的空白和灰色框

javascript html css mobile leaflet

Javascript 无法删除HTML正文外的空白和灰色框,javascript,html,css,mobile,leaflet,Javascript,Html,Css,Mobile,Leaflet,我有一个应用程序，上面有一张传单.js地图和一个侧边栏。在桌面上，它看起来不错，但当我运行page inspector并选择移动版本时，页面底部（地图/侧边栏之外）有空白，还有一个奇怪的灰色框。当我用鼠标指针在空白或灰色框上移动时，我无法检查它们。我尝试过更改主体CSS，但没有任何效果（包括主体没有底部边距/填充）我在这里有点困惑。以下是基本的HTML结构： <body>  <!-- Conten

我有一个应用程序，上面有一张传单.js地图和一个侧边栏。在桌面上，它看起来不错，但当我运行page inspector并选择移动版本时，页面底部（地图/侧边栏之外）有空白，还有一个奇怪的灰色框。当我用鼠标指针在空白或灰色框上移动时，我无法检查它们。我尝试过更改主体CSS，但没有任何效果（包括主体没有底部边距/填充）

我在这里有点困惑。以下是基本的HTML结构：

<body>
<!-- links to scripts go here --> 
<!-- Content Starts here -->
<div class="wrapper">
    <!-- Sidebar -->
    <nav id="sidebar">
        <div class="sidebar-header">                           
            <div class="filterContainer">
                <!-- filter map data with radio buttons here -->  
            </div>

            <div class="filterContainer">
                <!-- filter map data with radio buttons here --> 
            </div>
        </div>
            <!-- filter map data with calendar --> 
            <div id="datepicker"></div>
    </nav>

    <!-- Page Content -->
    <div id="content">   
            <!-- map -->        
            <div id="map" style="min-width: 100vh; min-height: 100vh">
                <button type="button" id="sidebarCollapse" class="btn btn-info">
                    <span>Filter Events</span>
                </button>
            </div>
    </div>
</div>

<script>

</script>

最后是问题的一个图像：

谢谢你的帮助

为什么你的HTML没有填满整个屏幕？你能显示所有的代码吗？我正在关闭这个；谢谢你的回复。将车身设置到位置：固定；在CSS中实现了这一点。非常感谢。

body {
    font-family: 'Poppins', sans-serif;
    background: #fafafa;
    height:100%;
    max-height:100%;
    overflow: hidden;
    padding-bottom: 1px;
}

    .wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

    #sidebar {
    min-width: 250px;
    max-width: 250px;      
}

.filterContainer ul{
list-style: none;
margin: 0;
margin-top: -12%;
margin-left: -12%;   
}

#content{
width:100%;
height:100%;
}

#map{
height:100%;
}