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;

用两个div覆盖100％的屏幕

1 个答案: