将DIV扩展到WordPress页面容器之外
[英]Extend DIV beyond WordPress page container
问题描述
I've seen a lot of questions like this, but specifically I want to extend one div in a WordPress beyond the page content. 
我已经看到了很多类似这样的问题，但是我特别想在WordPress的页面内容之外扩展一个div。
I have a Contact Us page, and I just want my google map to take up all of the bottom of the browser just above the footer. 我有一个“联系我们”页面，我只想让我的Google地图占据页脚上方浏览器的所有底部。 I want to be able to do this (if possible) within the CMS and not by creating a specific page template. 我希望能够（如果可能）在CMS中执行此操作，而不希望通过创建特定的页面模板来执行此操作。
Current code is simply: <div id='gmap_canvas' style='height:440px;width:100%;'></div> 当前代码很简单： <div id='gmap_canvas' style='height:440px;width:100%;'></div>
I'm using a theme (Sydney) built in Bootstrap if that helps. 如果有帮助，我正在使用Bootstrap中内置的主题（悉尼）。
2 个解决方案
解决方案1
0 已采纳 2016-06-07 05:12:34
Something like this? 像这样吗
.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>
Note: This assumes that the parent in which gmaps div is gonna be placed in, doesn't have any positioning context applied. 注意：假设要放置gmaps div的父对象，没有应用任何定位上下文。 That is it's position is static . 那是它的position是static 。
解决方案2
0 2016-06-07 05:17:30
You have two options, you could either take it out of the flow of the page by doing something like setting the position to absolute. 您有两个选择，您可以通过执行诸如将位置设置为绝对值之类的操作将其从页面流中删除。 The other option which I've just recently learned, is by setting opposing padding and margin. 我最近刚学到的另一个选项是设置相对的填充和边距。 That might be doable if you're looking to stick to inline editing. 如果您希望坚持进行内联编辑，那可能是可行的。
https://jsfiddle.net/DawnPatrol89/7zyv2kx6/ https://jsfiddle.net/DawnPatrol89/7zyv2kx6/
<div id="container">
<div id="box1">Box1</div>
<div id="box2">Box2</div>
</div>
#container {
width: 300px;
height: 300px;
background-color: pink;
padding: 20px;
}
#box1 {
background-color: yellow;
padding: 0 100px;
margin: 0 -100px;
}
#box2 {
background-color: orange;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.