我见过很多这样的问题,但具体来说,我想在页面内容之外扩展 WordPress 中的一个 div。
我有一个“联系我们”页面,我只想让我的谷歌地图占据浏览器底部的所有页脚上方。我希望能够在 CMS 中执行此操作(如果可能),而不是通过创建特定的页面模板。
当前代码很简单:<div id='gmap_canvas' style='height:440px;width:100%;'></div>
如果有帮助,我正在使用 Bootstrap 内置的主题(悉尼)。
最佳答案
是这样的吗?
.gmaps {
background: url(https://www.somersethouse.org.uk/images/mi/visit/map.jpg);
height: 200px; /*might not be needed by you*/
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
some content
<div class="gmaps">
</div>
</div>
</body>
</html>
注意:这假设将要放置 gmaps div 的父级没有应用任何定位上下文。即它的位置
是static
。
关于css - 将 DIV 扩展到 WordPress 页面容器之外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37670670/