添加叠加分区

Question

我正在创建一个全屏设计：

• 顶部％底部栏是特定高度，但是100％宽度
• 左中栏是特定宽度但高度为100％
• 中右栏占用剩下的空间

我正在尝试创建一个“选项”div，它会从右下方的栏中弹出，将我的地图叠加在中间右侧。

然而，通过查看我的code，您可以看到我所做的使得选项div从底部div开始并向下移动。此外，我给它100％的宽度，但它没有调整其容器的宽度，而是调整屏幕的宽度。

#options {
    position: absolute;
    background: #39E023;
    width: 100%;
    height: 200px;
    text-align: right;
}

谢谢你们！

Answer 1

给你的div margin-top等于高度，负数：

#options {
    position: absolute;
    background: #39E023;
    width: 100%;
    height: 200px;
    text-align: right;
    margin-top: -200px;
}

Answer 2

只需输入中右侧容器position:relative，然后将选项div设置为left:0; bottom:0;

我更新了您的fiddle