在导航栏下方放置 div

Question

我正在尝试将 Leaflet 地图放置在标准 Sails.js 视图中。 Sails.js 自动为每个页面添加页眉。在固定高度的情况下，地图是这样的：

#mapid {
    height: 400px;
}

这并不理想，因为我们希望高度根据屏幕尺寸灵活变化。使用 absolute 位置时，地图会填满整个屏幕并隐藏顶部栏。

#mapid {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

如何确保地图在保持顶部栏的同时填满屏幕？我试过将位置设置为相对位置，但这会隐藏地图。

Answer 1

将 'top' 值设置为顶部栏的高度。例如：

#mapid {
    position: absolute;
    top: 56px; // Here
    bottom: 0;
    width: 100%;
}

Place div below navigation bar