css - 如何根据 div min-width 自动调整 div 百分比？

Question

下面的代码按预期工作。我有两个 div，一个蓝色，一个绿色。蓝色 div 占 20%，红色 div 占 80%。

html,body {
    height: 100%;
}

body {
    margin: 0;
}

#panel {
    width: 20%;
    height: 100%;
    background-color: #0794ea;
    float: left;
}

#map {
    width: 80%;
    height: 100%;
    background-color: green;
    float: right;
}

我现在需要将蓝色 div#panel的最小宽度设置为 410 像素。所以我将它添加到#paneldiv 中。结果如下：

绿色 div 已被推到窗口高度以下，现在不可见。如何使绿色 div 的百分比自动调整大小以使其仍适合屏幕？

Answer 1

我认为这就是你想要的：

您真正想要的不是将地图的宽度指定为 80%，而是用 #map 元素填充其余的宽度。

这可以通过float:right从#map 元素中删除并添加overflow:auto- 来实现，这会导致地图元素占据剩余的宽度

小提琴

#panel {
    width: 20%;
    height: 100%;
    background-color: #0794ea;
    float: left;
    min-width: 410px;
}

#map {
    height: 100%;
    background-color: green;
    overflow:auto;
}