css - 如何根据 div 最小宽度自动调整 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 的最小宽度设置为 410px。所以我将它添加到 #panel div。结果如下:

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

Answer 1

我想这就是你想要的:

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

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

FIDDLE

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

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