Extend DIV beyond WordPress page container
Question
I've seen a lot of questions like this, but specifically I want to extend one div in a WordPress beyond the page content.
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. I want to be able to do this (if possible) within the CMS and not by creating a specific page template.
Current code is simply: <div id='gmap_canvas' style='height:440px;width:100%;'></div>
I'm using a theme (Sydney) built in Bootstrap if that helps.
2 answers
solution1
0 ACCPTED 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. That is it's position is static .
solution2
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/
<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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.