固定最小宽度和位置不起作用

Question

我有两列，其中左侧具有动态宽度，右侧具有位置：固定的谷歌地图。

左列有一个最小宽度值，当窗口调整大小时，它不起作用。

这是一个 jsfiddle：http://jsfiddle.net/WWLd9/61/

HTML：

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<section id="panel_contenedor">
</section>
<section id="mapa_contenedor">
<div id="map-canvas"></div>
</section>

CSS：

#panel_contenedor {
width: 50%;
min-width:300px;
}
#mapa_contenedor {
width:50%;
height:100%;
position:fixed;
top:0;
right:0;
}
#map-canvas {
height:100%;
width:100%;
}

Answer 1

我在#left 部分添加了min-width:50%;，并将min-width:200px; 更改为min-width:50%; 到#right。看来，在所有情况下，两个部分都会相应调整，蓝色部分不再隐藏红色。

编辑：

position:fixed 相对于 DOM 的 html 元素。这就是为什么即使最小宽度设置为 300 像素，您仍会看到地图的原因。

为了解决这个问题，我尝试了以下方法：

我用 iframe 替换了 google 地图（您可以随时根据需要进行设置）。

HTML：

<div id="main">
    <section id="panel_contenedor">
        todo texto bien elaborado ha de presentar siete características:<br><br><br><br>Ha de ser coherente, <br><br><br><br>es decir, centrarse en un solo tema, de forma que las diversas ideas<br><br><br><br> vertidas en él han de contribuir a la creación de una idea global.
    </section>
    <section id="mapa_contenedor">
        <iframe width="600" height="300" marginheight="0" 
        src="http://maps.google.com/maps?ie=UTF8&amp;q=loc:{address} {number}@{latitude},{longitude}&amp;z=14&amp;output=embed&amp;iwloc=near" 
        frameborder="0" marginwidth="0" scrolling="no">
        </iframe>
    </section>
</div>

CSS：

#panel_contenedor {
    width: 50%;
    min-width:300px;
    float:left;
}

#mapa_contenedor {
    max-width:50%;
    height:100%;
    float:right;
}

#map-canvas {
    height:100%;
    width:100%;
}

#main{
    width: 100%;
}

body{
    display:inline-block;
    /*overflow-x:hidden;*/
}

我已发表评论/*overflow-x:hidden;*/。只有在缩小窗口时需要滚动条时，它才会添加滚动条。 display:inline-block; 在同一行显示两个部分。我们只需要在左侧部分添加一个float:left，在右侧部分添加一个float:right。我已将它们放入 #main 容器中，以将大小调整为整个窗口。