Javascript 一个容器内有两个div

我有一个容器分区，里面有两个分区。第一个DIV（我的画布）需要在容器内的0处放置Absolute。我希望第二个DIV占据下面剩余50%的空间。成品需要具有响应性。我被困在如何定位第二个DIV上

我有以下HTML：

<div class="container map-container">
    @include('maps.world-map')
    <div id="my-canvas"></div>
    <div id="their-canvas"></div>
</div>

我试图找出下面画布的CSS

#their-canvas {
  ????
}

---

谢谢

不清楚您所说的“它需要响应”是什么意思

但是如果你想把第二块画布放在下面，你可以设置一个

top:50%属性。由于您正在使用画布的
高度
和
顶部
的相对值，因此其父级需要定义
高度
或
最小高度

请参见您可以使用
按钮设置第二个div:0px，高度：50%。检查下面更新的代码段


$（'.map container'）.height（$（window.height（）-55）；
$（窗口）。调整大小（函数（）{
$（'.map container'）.height（$（window.height（）-55）；
})
正文{
填充：0px；
边际：0px；
}
.map容器{
位置：相对位置；
显示：内联块；
宽度：100%；
最大宽度：1728px；
最大高度：1080px；
溢出：隐藏；
保证金：50px自动0自动；
}
#我的画布，
#他们的画布{
填充：0；
文本对齐：居中；
位置：绝对位置；
最大宽度：1728px；
最大高度：540像素；
宽度：100%；
身高：50%；
z指数：99998；
不透明度：0.8；
}
#我的画布{
左：0；
排名：0；
背景：红色；
}
#他们的画布{
身高：50%；
底部：0px；
背景：绿色；
}

我的画布
他们的画布
尝试以下代码，使用CSS本身即可实现


*{
填充：0px；
边际：0px；
}
.map容器{
位置：绝对位置；
显示：块；
宽度：100%；
最大宽度：1728px；
最大高度：1080px；
身高：100%；
}
#我的画布，
#他们的画布{
文本对齐：居中；
位置：绝对位置；
最大宽度：1728px；
最大高度：540像素；
宽度：100%；
身高：50%；
z指数：99998；
不透明度：0.8；
}
#我的画布{
背景：红色；
}
#他们的画布{
底部：0px；
背景：绿色；
}

在固定宽度重叠或响应式设计中？您好@Santhoshkumar我希望两个分区都覆盖在主容器上，每个分区都是面积的一半。我还希望div根据浏览器宽度的变化来调整高度Hi@therealpa我添加了答案，请检查一下……Hi@Super User，您的建议有效，但在更改浏览器宽度时，div高度不会根据家长的高度变化而变化。所以它并没有像现在这样灵敏。嗨，SantoshKumar，潜水艇需要放在容器顶部的绝对位置。谢谢你的帮助
#their-canvas {
  ????
}