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

我已经看到了很多这样的问题，但我特别想在WordPress之外扩展一个div来超出页面内容。将DIV扩展到WordPress页面容器之外

我有一个联系我们页面，我只是想让我的谷歌地图占用页脚上方所有浏览器的底部。我希望能够在CMS中做到这一点（如果可能的话），而不是通过创建特定的页面模板。

当前的代码很简单：<div id='gmap_canvas' style='height:440px;width:100%;'></div>

我使用的是内置自举，是否可以帮助一个主题（悉尼）。

2016-06-07 Warren

看到答案和下面的演示。确保你在全屏模式下看到它，因为预览会给你很多初始区域。 –

这样的事情？

.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是要去被放置在，没有应用任何定位上下文。那是position是static。

来源

2016-06-07 05:12:34

我很惊讶这个简单！ – Warren

很高兴帮助:) –

您有两种选择，您可以通过执行诸如将位置设置为绝对值之类的方法将其从页面流中移出。我刚刚学到的另一个选项是设置相反的填充和边距。如果你想坚持内联编辑，这可能是可行的。

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; 
}

来源

2016-06-07 05:17:30 DawnPatrol

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

回答

相关问题