css - 将 DIV 扩展到 WordPress 页面容器之外

标签 css wordpress

我见过很多这样的问题,但具体来说,我想在页面内容之外扩展 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/

相关文章:

wordpress - 当用户选择 Paypal 付款方式时,在结帐表单中禁用 WooCommerce 中的账单地址

javascript - 当用户在那里输入内容时为输入字段事件设置动画占位符

css - flex 方向不工作

颜色框宽度不计入垂直滚动条

css - Woo 推荐 Wordpress 插件 CSS 不再正常工作

php - 谷歌地图帮助放置标记

css - 是否可以在 css 继承中的输入之前设置一个 after 伪元素?

javascript - 使用带有 jquery 的 html 创建侧边菜单

php - 创建短代码以在 Woocommerce 上显示产品库存状态

php - 如果 WooCommerce 购物车中有特定产品,则强制输入 "Ship to different address"