用两个 div 覆盖 100% 的屏幕

Question

我有两个名为 map 和 filters 的 div。它们每个都有一个 1px 宽度的实心边框。目前map div 包含八行不同宽度的图像（如果需要，我可以提供屏幕截图）并且它具有固定位置。我想将filters div 放在map div 的正下方，它的高度为82.75%。我尝试了不同的显示和位置值，但没有成功，我的第一个 div 折叠或第二个保留在屏幕顶部。我应该怎么做才能让两个 div 分别覆盖 100% 的屏幕？

我的 CSS 代码：

body {
    margin: 0px;
    width: 100%;
    height: 100%;
    background-color: #F7F7F7 !important;
}
#map {
    display: table;
    border-style: solid;
    border-width: 1px;
    width: 100%;
    height: 82.75%;
    position: fixed;
}
#filters {
    border-style: solid;
    border-width: 1px;
    width: 100%;
    height: 17.25%;
    position: fixed;
}

Answer 1

将bottom: 0 应用于#filters 即可解决问题。

编辑： 发生这种情况是因为边框 - 默认情况下，它的宽度不会添加到整个元素大小。您需要将这些规则添加到#map 和#filters：

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-box-sizing: border-box;