Question

我在容器div中有2列，其中width of 50%，1列有虚拟文本等，另一列有谷歌地图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

这个怎么样：

<强> FIDDLE

（相关）CSS

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

Answer 2

我已根据您的要求完成了更改，但您必须根据您的requiremnet更改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/

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

2 个答案:

（相关）CSS