如何编辑此代码?谷歌地图-它应该是粘性的，而不是浮动的

Question

我已经准备好了这段代码。我想改变两件事：1( 宽度：100%->无效2( 它应该是粘性的，而不是漂浮在我的网站上。如何改变这一点？

<div style="overflow:hidden;width: 1800px;position: relative;"><iframe src="https://maps.google.com/maps?height=300&amp;hl=en&amp;q=United%20Kingdom+(Map)&amp;ie=UTF8&amp;t=&amp;z=5&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe></div>

我已经添加到我的样式.css:

iframe {
width:100%;
height:300px;
}

但如果我要更改<div style="overflow:hidden;width: 1800px;至<div style="overflow:hidden;width: 100%;我的地图不见了。

Answer 1

不要使用width: 1800px，因为它通常会产生水平滚动条。请改用width: 100%。

我在div和iframe中都添加了width: 100%; height: 300px。仍然不能完全确定你所说的"粘性而非漂浮性"是什么意思。为了以防万一，我在div中添加了position: sticky，因此贴图始终位于视口的顶部。

body {
margin: 0;
padding: 0;
}
.map__container,
.map__iframe {
width: 100%;
height: 300px;
}
.map__container {
overflow: hidden;
position: sticky;
top: 0;
}

<div class="map__container">
<iframe class="map__iframe" src="https://maps.google.com/maps?height=300&amp;hl=en&amp;q=United%20Kingdom+(Map)&amp;ie=UTF8&amp;t=&amp;z=5&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br>This
is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br>This
is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br> This is content<br>