将div放在导航栏下方

Question

我正在尝试在标准Sails.js视图内放置一个Leaflet地图。 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%;
}