限制网页结尾

时间:2016-05-05 19:00:20

标签: html css twitter-bootstrap google-maps

我有这个div我嵌入了一个全宽的谷歌地图,一切都很完美。

唯一的问题是我希望网站以该地图结束,但是在地图之后有一个很大的白色空白空间非常烦人,我无法摆脱它。

这是白色空间: enter image description here

这是HTML:

<section id="map">

            <div class="row map-responsive">


                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3610.334763153511!2d55.25977471511042!3d25.191930738095937!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5f69d635700003%3A0x5c8b6fcc676e05d2!2sEngage+Me!5e0!3m2!1sen!2sae!4v1462471068339" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>



            </div>
    </section>

CSS:

.map-responsive{
    margin-top: 0;
    padding-top: 0;
    overflow:hidden;
    position:relative;
    top: -150px;
    padding: 30%;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:300px;
    width:100% !important;
    position:absolute;
}

1 个答案:

答案 0 :(得分:0)

答案是将填充设置为30px而不是30%。

我也删除了它,只是自己离开了。