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

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

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

修改

position:fixed与DOM的html元素相关。即使最小宽度设置为300px，这就是你看地图的原因。

要修复它，这是我尝试过的：

我用iframe替换谷歌地图（您可以随意设置它）。

<强> 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容器中，以便将大小调整到整个窗口。