css - 向上或向下缩放窗口大小时保持相同的列高

Question

我在容器 div 中有 2 列width of 50%，其中 1 列有虚拟文本等，另一列有 google map iframe。我在地图周围包裹了一个流体容器并应用于position absolute;iframe 以在其容器内扩展地图，但我注意到地图似乎缩小并超出了联系列，任何人都可以建议我如何才能始终如一地使地图成为与另一列高度相同？我需要这个布局来保持流畅，所以完整的 100% 宽度

JSFiddle：http: //jsfiddle.net/Xm6GW/1/

CSS

.col-ctn {
    width: 100%;
}
.col {
    width: 50%;
    background: silver
}
.contact-col {
    float: left;
}
.map-col {
    float: right;
}
.fluid-map {
    position: relative;
    padding-bottom: 100%;
    height: 0;
}
.fluid-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Answer 1

这个怎么样：

小提琴

（相关）CSS

html,body,.col-ctn,.contact-col
{
    height: 100%;
}
.fluid-map {
    position: absolute;
    top:0;
    left:50%;
    height: 100%;
}

Answer 2

我已根据您的要求进行了更改，但您必须根据您的要求更改 css 命名。

CSS：-

body, html {
 height: 100%;
 padding: 0;
 margin:0;
}
.main_container
{
    width:100%;
    height:98%;
}
.info_container
{
    width:49.2%;
    height:100%;
    border:1px solid;
    float:left;
}
.map_container
{
    width:50%;
    height:100%;
    border:1px solid;
    float:right;
} 

html:-

<div class="main_container">
             <div class="info_container">
                 <div class="inner">
                     <h2>Header</h2>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
             </div>
                 <div class="map_container">
                     <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/?ie=UTF8&amp;t=m&amp;ll=47.754098,12.480469&amp;spn=20.702603,37.353516&amp;z=4&amp;output=embed"></iframe>
                 </div>
        </div>

小提琴链接：- http://jsfiddle.net/Xm6GW/1/