Html 用两个div覆盖100%的屏幕

我有两个div，分别是

map

和

filters

。它们每个都有1倍宽的实心边框。目前，

map

div包含八行不同宽度的图像（如有必要，我可以提供一个屏幕截图），并且它有一个固定的位置。我想把

filters

div放在

map

div的正下方，它有82.75%的高度。我尝试了不同的显示和位置值，但没有成功，要么我的第一个div崩溃，要么第二个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;
}

---

将

bottom:0

应用于

#过滤器

可以解决此问题

编辑： 这是因为边框的缘故——默认情况下，边框的宽度不会添加到整个元素的大小中。您需要将这些规则添加到

#map

和

#filters

：

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

---

我应该怎么做才能让两个div都覆盖屏幕的100%，一个在另一个之下？或者并排？为什么不为它们设置'top:0'/'bottom:0'和'left:0'值？@Agat-正如我在回答中要说的，你应该发布它。试着给bottom:0来过滤div。@Mr.Alien我很抱歉没有充分解释我自己，我基本上希望map div覆盖82.75%的屏幕高度，filters div覆盖剩余的17.25%；谢谢这解决了我原来的问题，但是div现在被2px分开了，我不知道为什么？Printscreen：我尝试了更新版本，但没有成功。我的代码中包含了引导css，这可能会影响边框？2个像素是因为您的边框（每个框对应一个框）可能没有颜色（或其他颜色）。@Agat我已经更改了过滤器div的高度百分比，现在正在填补空白。谢谢你的帮助！