Javascript 覆盖另一个div，div高度为100%

我一直在尝试使用css的div（深蓝色）布局，以便在不覆盖底部面板的情况下根据窗口的大小改变大小，我认为高度为100%正式，但不理解，因为它忽略了下面的面板，并最终离开页面

既然你不让我发布图片，那么我也有一些东西：

html:

不确定你是否能用css解决问题，或者不得不求助于使用javascript（这是我想要避免的），有谁知道一些可以帮助我的属性吗

---

更新：这是布局尝试的图片：

如果为子元素指定100%的高度，它将占据父元素高度的100%。如果希望元素覆盖整个容器而不在父元素的文档流中，可以尝试执行以下操作：

#darkBlue {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #3a5193;
}

---

编辑：@Niels提到了一个我以前没有提到的额外细节。为此，需要将父元素位置设置为

固定

，

绝对

或

相对

，

另一个面板的CSS中有一个打字错误。您有
botton
而不是
bottom
。使用此CSS属性时，最好设置
位置

试试这个：

#anotherPanel{
    height: 100px;
    width: 300px;
    bottom: 0px;
    background: #F00;
    position:absolute;
}


最佳。
使用
底部
顶部
左侧
右侧
必须定义
位置
。在您的情况下，从另一个面板中移除
底部
，然后添加到
#深蓝色
高度：calc（100%-100px）


更新

如果您不想使用
calc
则添加
边距底部：-100px至
#深蓝色

将位置设置为绝对位置。最后一个定义行中有一个输入错误：
botton
而不是
bottom
。抱歉，jeje，输入错误不要忘记，只有通过将父对象的
位置设置为
fixed
，正确地为父对象分配了定位上下文，此操作才有效，
absolute
或
relative
。在这种情况下，他的父元素设置为
fixed
。我需要的不是其他2个div，而是额外的空间，它可以covers@SargoDarya我知道，我之所以将其添加到答案中，是因为其他读者必须理解您答案中的代码不是“独立”工作的.calc
calc
并不会真正优雅地降级。calc可以工作，但我担心Niels的评论，使用这种方法的后果到底是什么？
#darkBlue {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #3a5193;
}

#anotherPanel{
    height: 100px;
    width: 300px;
    bottom: 0px;
    background: #F00;
    position:absolute;
}